Vue.js v-for不起作用 [英] Vue.js v-for not working

问题描述

我正在尝试Vue.js，但是遇到了问题.我正在关注Laracasts上的教程，但我的v-for无法正常工作.

I'm trying Vue.js out but I am running into a problem. I am following a tutorial over at Laracasts but my v-for isn't working.

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

If it helps, the link to the Laracast with episode: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/4?autoplay=true

推荐答案

在 data 对象之后，您缺少逗号:

You are missing the comma after the data object:

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

这篇关于Vue.js v-for不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！