【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是为什么?
输入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>
谢邀
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