danniehakan/test.html

## 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>
	{% 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>