Recently, I started working with Vue.js and have been experimenting with it for a few days. One of the challenges I'm facing is trying to dynamically add a new div element with text input every time the enter button is pressed. I would greatly appreciate your help in reviewing this code.
Script
window.onload = function () {
Vue.component('todo-item', {
props: ['todo'],
template: '<div id="div{{todo.id}}">{{ todo.text }}</div>'
});
var app7 = new Vue({
el: '#app-7',
data() {
return {
divList: [],
textInput:''
}
},
methods: {
addUser() {
return this.divList.push({
id: + new Date,
text: textInput
});
}
}
});
}
HTML
<div id="app-7">
<input v-model="textInput" v-on:keyup.enter="addUser" />
<todo-item v-for="item in divList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</div>
After checking the value of app7.textInput on the JavaScript console, I noticed that it's not binding properly...