Vue.js v-表示不工作

guykilcj  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(218)

我正在试用Vue.js,但是遇到了一个问题。我正在Larasts上学习教程,但是我的v-for不起作用。
于飞:

<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

webghufk

webghufk1#

data对象后缺少逗号:

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

nqwrtyyt2#

您有一个简单的语法错误-“data”和“methods”对象之间缺少逗号:

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

此版本的小提琴添加了它,并显示它正在工作:https://jsfiddle.net/4pb1f4uq/1/
你可以在浏览器的控制台中检查错误(按F12),很容易地发现这种情况。它会突出显示语法错误,通常你可以点击错误并被带到出错的代码行。

相关问题