почему мой код не обновляется, когда я добавляю новый элемент в список

Question

Я пытаюсь разрешить добавление элемента в список циклов, которые я просматривал, используя Vue. js. Я не понимаю, почему, когда я нажимаю на кнопку, появляется элемент списка, а текст - нет.

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

Answer 1

В вашем коде есть опечатка.

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

Должно быть:

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

Обратите внимание на другое написание для v-model.