带有数据的 Vue.js 模板

Question

我已经使用 Vue.js 工作了几天，每次按下回车按钮时，我都会尝试在输入中添加一个带有文本的新 div。你能帮我检查一下这段代码吗？

脚本

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>

在 JavaScript 控制台上，如果我检查 app7.textInput 的值，我发现它没有正确绑定...

Answer 1

谢谢Bert 我只需要更改并删除缓存

         methods: {
                        addUser() {
                            return this.divList.push({
                                id: + new Date,
                                text: this.textInput
                            });
                        }
                    }