Vue.js v-for не работает

Я пытаюсь использовать 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
person S. Kanon    schedule 19.04.2017    source источник
comment
Это может помочь, если вы прочитаете вывод, если ваш компилятор или даже консоль. Это покажет вам, что вы забыли поставить запятую после определения данных.   -  person Daniel Gelling    schedule 19.04.2017

Ответы (2)


arrow_upward
8
arrow_downward

Вам не хватает запятой после объекта data:

data: {
  newName: '',
  names: ['John', 'Mike']
},  // comma here
person Decade Moon    schedule 19.04.2017
comment
Ну, это работает в моем JSfiddle, но не на моем собственном сайте ... это действительно странно. - person S. Kanon; 19.04.2017

arrow_upward
2
arrow_downward

У вас простая синтаксическая ошибка - между объектами "данные" и "методы" отсутствует запятая:

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

Эта версия вашей скрипки добавляет его и показывает, что он работает: https://jsfiddle.net/4pb1f4uq/1/

Вы можете легко обнаружить подобные вещи, проверив наличие ошибок в консоли браузера (нажмите F12). Он выделит синтаксическую ошибку, и обычно вы можете щелкнуть по ошибке и перейти к нарушающей строке кода.

person ADyson    schedule 19.04.2017