我正在尝试Vue.js,但我遇到了问题。我正在Laracasts上学习一些教程,但我的v-for无效。
HTML:
<div id="root">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
<input type="text" v-model="newName">
<button @click="addName">Add Name</button>
</div>
JS:
new Vue({
el: '#root',
data: {
newName: '',
names: ['John', 'Mike']
}
methods: {
addName() {
this.names.push(this.newName);
this.newName = '';
}
}
})
小提琴:https://jsfiddle.net/4pb1f4uq/
如果它有帮助,链接到Laracast的剧集: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/4?autoplay=true
答案 0 :(得分:3)
您在data
对象后缺少逗号:
data: {
newName: '',
names: ['John', 'Mike']
}, // comma here
答案 1 :(得分:1)
您有一个简单的语法错误 - “data”和“methods”对象之间缺少逗号:
data: {
newName: '',
names: ['John', 'Mike']
}, //this comma was missing
这个版本的小提琴添加了它,并显示它正常工作:https://jsfiddle.net/4pb1f4uq/1/
您可以通过在浏览器控制台中检查错误来轻松地检测到此类事件(按F12)。它将突出显示语法错误,通常您可以单击错误并将其转到有问题的代码行。