{% load static %}
{% block content %}
    {% verbatim %}
    <div id="app">
        <div>
            <h1 v-model="title1"></h1>
            <table class="params">
                <tr v-for="(prod,index) in products">
                    <td>{{index}}</td>
                    <td>
                        <div v-model="prod.namn"/>

                    </td>
                    <td>
                        <span v-model="prod.antal"/>
                    </td>
                    <td v-model="prod.euro">

                    </td>
                </tr>
            </table>

            <p v-model="title2"></p>
            <table class="params">
                <tr v-for="(prod,index) in products">
                    <td>{{index}}</td>
                    <td>
                        <input v-model="prod.namn"/>

                    </td>
                    <td>
                        <input v-model="prod.antal"/>
                    </td>
                    <td><input v-model="prod.euro"/></td>
                </tr>
            </table>

            {{products}}
        </div>
        <h2 v-model="title3"></h2>
        <ul>
            <li v-for="(prod,index) in products" v-model="prod.namn">
            </li>
        </ul>

        <p>CONTENT VALUE</p>
        {{val}}
        <input type="button" value="change" @click="change"/>
        <div>
            <p>V-MODEL INPUT</p>
            <input v-model="val"/>
        </div>
        <div>
            <p>V-MODEL CONTENTEDITABLE</p>
            <div v-model="val">
            </div>
        </div>
        <br/>
        If you cannot edit source code, try below hack.<br/>
        <a target="_blank" href="https://codepen.io/muthu32/pen/qBWvaYq">https://codepen.io/muthu32/pen/qBWvaYq</a>
    </div>
    {% endverbatim %}
    <script src="{% static 'vue/roles.vue' %}"></script>
{% endblock %}