How to create a very simple and minimalist Todo app with Vue js ?
A todo app is a very important concept for programming newbies. It includes handling
of dynamic form, its data and array manipulation. This is the basis of any big dynamic
user interface. And its a often obvious task for the new Interns in almost any company. So below here is a very very simple Todo app, which just takes an input from user and stores each todo in an array.
Click the js fiddle link below to see the demo :
JS fiddle : https://jsfiddle.net/gitamgadtaula/cbzfj9vn/14/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="cart">
{{myText}} <br />
<input type="text" v-model="myText" value="" @onclick="add()" />
<button @click="add()">click</button>
<hr />
<span v-for="item in myArray">
{{item}} <button @click="deleteFunc(item)">remove</button>
<hr />
<br
/></span>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: ".cart",
data: {
items: 0,
myText: "",
myArray: [],
},
methods: {
add: function () {
this.myArray.push(this.myText);
console.log("added inside the array");
},
deleteFunc: function (id) {
console.log("remove function called");
this.myArray.splice(this.myArray.indexOf(id), 1); //removes 1 element of the given index
},
},
});
</script>
Comments
Post a Comment