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

watch{

withStoneList: {

handler: function (val, oldVal) {

console.log("peibian")

console.log(val)

console.log(oldVal)

},

deep: true

}

}

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

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

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

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

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

回答

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

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

以上是 【Vue】watch深度监听一个对象。为什么select下拉可以监听。input输入改变监听不到呢???? 的全部内容, 来源链接: utcz.com/a/82676.html

回到顶部