watch深度监听一个对象。为什么select下拉可以监听。input输入改变监听不到呢？？？？

Question

watch{
withStoneList: {
        handler: function (val, oldVal) {
          console.log("peibian")
          console.log(val)
          console.log(oldVal)
        },
        deep: true
}
}

withStoneList是个数组。数组的每一项是个对象。对象里面的属性，有的绑定select下拉，有的绑定input输入框。我发现只有下拉选项改变才会触发监听。input中输入数据并不会触发watch是为什么？

输入11不会触发监听，为什么

http://codepen.io/shenyuanyua...

http://runjs.cn/detail/7sqcekt6

Answer 1

v-model 就是一个语法糖，监听了 @input事件
<input type="text" :value="val" @input="val=$event.target.value" />

而v-model.lazy，则是监听了@change事件

<input type="text" :value="val" @change="val=$event.target.value" />

你可以在input/change事件，触发一个自定义的method,主动赋值并进行其它操作

  <div id="app">
      <input type="text" :value="val" @input="foo($event)" />
      <p>{{ val }}</p>
 </div>
  <script src="http://cdn.bootcss.com/vue/2.1.6/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        val: ''
      },
      methods: {
        foo (e) {
          this.val = e.target.value
          if (this.val == 'test') {
            alert(1)
          }
        }
      }
    })
  </script>

case

Answer 2

谢邀

input等form表单的输入框，可以使用v-model

Answer 3

<div id="app">
  <div v-for="item in list">
    <input type="text" v-model="item.val" />
  </div>
      
 </div>
  <script src="http://cdn.bootcss.com/vue/2.1.6/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list:[
          {val: ''},
          {val:''}
        ]
        
      },
      watch: {
        list:{
          handler: function (val, oldVal)                             {
          alert(11);
            },
        deep: true
        }
      },
    })
  </script>

list下面很多对象。对象里面有很多属性。我list.push({a:00,b:00,c:00}),进去一个对象。但是input绑定的val属性我没有写。所以导致input输入时，会在{a:00,b:00,c:00}下面创建val。所以在修改就不会触发watch。应该list.push({a:00,b:00,c:00,val:''})这样代码就没有问题了

Answer 4

看不到完整代码，因此不知道是什么原因导致的