vuewatch监听data里的数据,vuewatch监听对象及对应值的变化
本文主要介绍vue测试和development watch监测数据的数据变化。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
观察监控数据变化。新问题迎刃而解。1.首先，将名称的值添加到选项中。2.增加监控中的循环和判断。
watch监听data的数据变化
上一篇文章中提到用elementUI的select实现了远程搜索功能，最终结果如下。
但是当我们继续开发的时候，我们遇到了一个新的问题，这个问题与上面的功能有关。
我们先来看一下远程搜索的操作，以及它与数据中数据的关系。
当您输入“张”进行搜索时，下拉列表中显示的结果都存储在数据选项：[]。我选择一个的时候，比如“张三”，因为选择框绑定了v-model=user_value ，user_value有对应的人的值，id被存储。最后一个ad_real_name是加的，因为我有一个界面要改。本来只需要传id，现在要传收货人的名字。
新问题
之前只传了id，很好办，因为user_value是绑定的，直接用就行了。
但现在我也需要传递ad_real_name。问题是，当user_value有一个值(id)时，我如何将id对应的名称分配给ad_real_named。
解决
我第一次尝试在同一个事件中调用两个方法，结果不是很好。
然后我想到了监控。当这个人被点击后，user_value就被赋值了。如果我监视这个字段，当有一个值时，我可以将这个人的名字分配给ad_real_name。
接下来，实现代码：
1. 先把姓名的值，也加到options里
Options是一个列表，其中的元素是objects {}，对象是key-value。我之前只放了{value: ，label:}，现在要放ad_real_name进去，变成了{value: ，label: ，ad _ real _ name:}。
2. 在监听里增加for循环和判断
当选择一个人时，for此时循环该选项，遍历每个对象。然后，当对象中的值等于选定的user_value时，该对象中“ad_real_name”的相应值被分配给数据中的字段ad_real_name。
为了快速验证效果，控制台增加了日志打印。最后的代码是：
观察：{
user_value:function() {
for(设I=0；ithis . options . length；i ) {
if(this . options[I][ value ]===this . user _ value){
this . ad _ real _ name=this . options[I][ ad _ real _ name ]；
console . log( print this.ad _ real _ name ，this . ad _ real _ name)
}
}
}
},
User_value:表示我想听这个字段。Function():这里写一下监测到变化后要做的处理。打开F12控制台，目标就实现了。
也许还有其他更快的方法，但毕竟我是前端小白，快速解决问题是第一要务。如果大佬们有更好的写作建议，欢迎随时评论。
-2021年5月25日-
后来发现发展中还存在一些问题。F12看了一下，传递给接口的值ad_real_name还是null。
但是控制台输出这个字段是有价值的。所以我猜测，是不是事件触发的太快了，也就是说ad_real_name实际上是发送了后端请求才可以赋值的。
所以，我处理了从下后端发送请求的方法，增加了500ms的延迟。
getReceiveOperatorToken() {
setTimeout(()={
这个。$ axios . post(/API/receiveGoodsQuickly/getReceiveOperatorToken ，{
sm_admin_id: this.user_value
接收wh id :this . receive _ wh _ id，
广告真实姓名:this.ad真实姓名，
“麦基德”:6001
}).然后((响应)={
if (response.data[code]===0) {
this . receive _ operator _ token=response . data[ content ]；
这个。$message({
类型：“成功”，
消息：“成功获取收货人的令牌”
})
}否则{
这个。$message({
类型：警告，
message:response . data[ error msg ]，
});
}
})
}, 500);//使用setTimeout()
},
成功解决。
以上是vue测试和开发手表监测数据的数据变化详情。更多关于vue测试和开发watch监测数据的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。