Vue.js v-for 不工作

Question

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

Answer 1

您在data对象后缺少逗号：

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