(function(){
'use strict';
// two way data binding
var vm = new Vue({
el: '#app',
data: {
newItem: '',
todos: [
'task 1',
'task 2',
'task 3'
]
},
methods: {
addItem: function(e){
e.preventDefault();
this.todos.push(this.newItem);
this.newItem = '';
},
deleteItem: function(index){
if (confirm('are you sure?')){
this.todos.splice(index, 1);
}
}
}
});
})();
<body>
<div id="app" class="container">
<h1>My Todo</h1>
<ul>
<li v-for="(todo, index) in todos">
{{ todo }}
<span @click="deleteItem(index)">[x]</span>
</li>
</ul>
<form @submit="addItem">
<input type="text" v-model="newItem">
<input type="submit" value="Add">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
