Vue.js v-for not working

5
votes

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 = '';
      }
    }
})

Fiddle: https://jsfiddle.net/4pb1f4uq/

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

2
htmlvue.jsv-for
It may help if you read the output if your compiler or even in you console. It would show you that you've forgotten to place a comma after defining the data. – Daniel Gelling

2 Answers

8
votes

You are missing the comma after the data object:

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

You have a simple syntax error - a comma is missing between the "data" and "methods" objects:

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

This version of your fiddle adds it, and shows it working: https://jsfiddle.net/4pb1f4uq/1/

You can detect this kind of thing easily yourself by checking for errors in your browser's console (press F12). It will highlight the syntax error and usually you can click on the error and be taken to the offending line of code.