Home » vue » why won't my code update when I add a new Item to the list

why won't my code update when I add a new Item to the list

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am trying to allow an item to be pushed to a list of times that I looped through using Vue.js. I don’t understand why when I click on the button the list item appears but the text doesn’t.

HTML

 <div id="root">
    <input v-modle="newCat" v-on:keyup.enter="addKitty">
    <button v-on:click="addKitty">
      +add
    </button>
  <ul>
    <li v-for="cat in cats">{{ cat.name }}</li>
  </ul>
 </div>

Vue.js

 app = new Vue({
   el: '#root',
   data: {
     cats: 
       [{name: 'kitkat'},
       { name: 'fish'},
       { name: 'henry'},
       { name: 'bosco'}],
     //new data set
     newCat: ''
   },
   methods: {
     addKitty: function() {
        this.cats.push({
         name: this.newCat
       })
      this.newCat = ''
      }
  }
})
Answers:

There is a typo in your code.

<input v-modle="newCat" v-on:keyup.enter="addKitty">

Should be:

<input v-model="newCat" v-on:keyup.enter="addKitty">

Notice the different spelling for v-model.