CODEWITHSUNDEEP
htmlvue.jsv-for
S. Kanon
S. Kanon

Reputation: 81

Vue.js v-for not working

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

Upvotes: 6

Views: 17829

Answers (3)

despotbg
despotbg

Reputation: 778

v-for was not working for me, for dynamically added elements in object. Turned out there some reactivity issue. And element to array should be added like this

this.$set(this.files, key, file)

Upvotes: 0

ADyson
ADyson

Reputation: 61859

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.

Upvotes: 2

Decade Moon
Decade Moon

Reputation: 34286

You are missing the comma after the data object:

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

Upvotes: 8

Related Questions