Skip to content

Instantly share code, notes, and snippets.

@danniehakan

danniehakan/test.html

Last active September 24, 2019 09:22
Show Gist options
  • Save danniehakan/6979d9c345fccc341ee13147ba2bbe47 to your computer and use it in GitHub Desktop.
Save danniehakan/6979d9c345fccc341ee13147ba2bbe47 to your computer and use it in GitHub Desktop.
Download ZIP
Django and Vue rendering
Raw
test.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{% static 'css/app.css' %}">
<meta charset="utf-8">
<title>Django and Vue test</title>
</head>
<body>
{% if names %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var names = {{ names_json|safe }};
</script>
<div id="app">
<h2>Django list</h2>
<ul>
{% for name in names %}
<li>
<div class="hover:opacity-75 md:flex bg-white rounded-lg p-6 border-2 m-2">
<img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
<div class="text-center md:text-left">
<h2 class="text-lg">{{ name }}</h2>
<div class="text-purple-500">Customer Support</div>
<div class="text-gray-600">{{ name }}@test.se</div>
<div class="text-gray-600">(555) 765-4321</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<h2>Vue list</h2>
<ul>
<li v-for="name in names">
<div v-on:click="greet(name)"
class="hover:opacity-75 cursor-pointer md:flex bg-white rounded-lg p-6 border-2 m-2">
<img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
<div class="text-center md:text-left">
<h2 class="text-lg">[[ name ]]</h2>
<div class="text-purple-500">Customer Support</div>
<div class="text-gray-600">[[ name ]]@test.se</div>
<div class="text-gray-600">(555) 765-4321</div>
</div>
</div>
</li>
</ul>
</div>
<script>
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
names: names,
},
methods: {
greet: function (name) {
console.log('Vue says hello from ' + name + '!')
}
}
});
</script>
{% endif %}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment