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

缓缓
  • 1.3k
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

回复
阅读 14k
4 个回答

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

谢邀

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

<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:''})这样代码就没有问题了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏