Vue.js v-for 不工作答案

【问题标题】：Vue.js v-for not workingVue.js v-for 不工作
【发布时间】：2017-09-15 09:01:10
【问题描述】：

我正在尝试使用 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

【问题讨论】：

如果您在编译器甚至控制台中读取输出，可能会有所帮助。它会显示您在定义数据后忘记放置逗号。

标签： html vue.js v-for

【解决方案1】：

data 对象后缺少逗号：

data: {
  newName: '',
  names: ['John', 'Mike']
},  // comma here

【讨论】：

嗯，这在我的 JSfiddle 中有效，但不适用于我自己的网站……这真的很奇怪。

【解决方案2】：

您有一个简单的语法错误 - “数据”和“方法”对象之间缺少逗号：

data: {
  newName: '',
  names: ['John', 'Mike']
}, //this comma was missing

这个版本的小提琴添加了它，并显示它工作：https://jsfiddle.net/4pb1f4uq/1/

您可以通过检查浏览器控制台中的错误（按 F12）自己轻松检测到这种情况。它将突出显示语法错误，通常您可以单击错误并转到有问题的代码行。

【讨论】：