美文网首页
Vue 2.0 小栗子初入坑

Vue 2.0 小栗子初入坑

作者: L_CINA | 来源:发表于2016-11-01 15:57 被阅读48次
    HTML代码:
    <div id = "app">
      <input v-model="newTodo" v-on:keyup.enter="addTodo">
      <ul>
        <li v-for="todo in todos_1">
          <span>{{ todo.text }}</span>
          <button v-on:click="removeTodo($index)">X</button>
        </li>
      </ul>
    </div>
    
    JavaScript代码:
    new Vue({
      el: '#app',
      data: {
        todos_1: [{
          text: 'Learn JavaScript'
        }]
      },
      methods: {
        addTodo: function() {
          var text = this.newTodo.trim()
          if(text) {
        this.todos_1.push({
          text: text
        })
        this.newTodo = ''
          }
        },
        removeTodo: function(index) {
          this.todos_1.splice(index, 1)
        }
      },
    })
    

    运行上面的代码,打开谷歌控制台,在输入框输入,发现控制台报错,错误原因:[Vue warn]: You are setting a non-existent >path "newTodo" on a vm instance. Consider pre-initializing the property with the "data" option for more reliable reactivity and >better performance.。输入框的例子在官方前面的例子也有出现,对比后发现v-model="newTodo",中的“newTodo”没有在>data中进行定义,所以只需在data{}中加入newTodo: ' '即可!这个错误看起来好像在运行过程中没有什么影响,但天知道以后会>不会被他坑惨,所以记录一下!

    相关文章

      网友评论

          本文标题:Vue 2.0 小栗子初入坑

          本文链接:https://www.haomeiwen.com/subject/anpmuttx.html