【测试开发】vue — watch监听data的数据变化

简介: 【测试开发】vue — watch监听data的数据变化

上一篇里提到了用elementUI的select实现了个远程搜索的功能,最终效果是这样的。


1268169-20210522222407338-30153378.png


但是继续开发的时候,又遇到了一个新的问题,跟上面的功能有关。


先看下远程搜索的操作,与data里的数据关系。


1268169-20210522222714306-968789257.png


  • 当输入“张”进行搜索,看到的下拉列表里展示的结果都是存放在data的options: []
  • 当我选择了一个,比如“张三”,因为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


解决


我先试着同一个事件里面能不能调用2个方法,结果不太行。


再后来我就想到监听了,当点击了人员后,user_value此时被赋值,如果我监听这个字段,当有值的时候,去把人名赋给ad_real_name即可。


接下来就是代码实现了:


1. 先把姓名的值,也加到options里


这个options是个列表,里面的元素是一个个对象{},对象里就是key-value。之前只放了{value:"", label: ""},现在我要把ad_real_name也放进去,变成

{value:"", label: "", ad_real_name: ""}


1268169-20210522223129768-1993578863.png


2. 在监听里增加for循环和判断


当选择了人员之后,此时for循环这个options,遍历每一个对象。然后判断当对象里的value=选定的user_value,就把这个对象中的"ad_real_name"对应值赋给data里的字段ad_real_name


为了快速验证效果,在console里加了log打印。最终的代码是:


watch: {
    user_value:function() {
        for (let i=0; i<this.options.length; i++) {
            if (this.options[i]['value'] === this.user_value) {
                this.ad_real_name = this.options[i]['ad_real_name'];
                console.log("打印this.ad_real_name", this.ad_real_name)
            }
        }
    }
},


  • user_value:表示我要监听这个字段。
  • function():这里写监听到变化后,要做的处理。


F12打开控制台,目标达成。


1268169-20210522225629377-688937964.png


或许还有别的更快捷的方法,但是毕竟我是前端小白,快速解决问题为首要,如果大佬们有更好的写法建议,还请不吝赐教。


-----------------2021-05-25------------更-------------


往后开发的时候发现还是有些问题,F12看了下,传递到接口的值ad_real_name还是null。


1268169-20210525235145077-1871612866.png


但是控制台输出这个字段又是有值的。于是我猜想,是不是事件触发的太快了,也就是说ad_real_name其实还没来得及赋上值,就发送后端请求了。


于是,我处理了下后端发送请求的方法,加了个延迟500ms。


getReceiveOperatorToken() {
    setTimeout(() => {
        this.$axios.post('/api/receiveGoodsQuickly/getReceiveOperatorToken', {
            'sm_admin_id': this.user_value,
            'receive_wh_id': this.receive_wh_id,
            'ad_real_name': this.ad_real_name,
            'mchid': 6001
        }).then((response) => {
            if (response.data['code'] === 0) {
                this.receive_operator_token = response.data['content'];
                this.$message({
                    type: 'success',
                    message: '收货人token获取成功'
                })
            } else {
                this.$message({
                    type: 'warning',
                    message: response.data['errormsg'],
                });
            }
        })
    }, 500); // 用setTimeout()
},


成功解决。

相关文章
|
1月前
|
分布式计算 Shell MaxCompute
odps测试表及大量数据构建测试
odps测试表及大量数据构建测试
|
25天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生体质测试管理系统设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
37 2
|
2月前
|
开发框架 .NET Java
C#集合数据去重的5种方式及其性能对比测试分析
C#集合数据去重的5种方式及其性能对比测试分析
38 11
|
2月前
|
开发框架 .NET Java
C#集合数据去重的5种方式及其性能对比测试分析
C#集合数据去重的5种方式及其性能对比测试分析
55 10
|
3月前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法。本文介绍 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,同时提供 Python 实现示例,强调其在确保项目性能和用户体验方面的关键作用。
68 6
|
3月前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段。本文介绍了 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,强调了样本量、随机性和时间因素的重要性,并展示了 Python 在 A/B 测试中的具体应用实例。
47 1
|
3月前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
63 1
|
3月前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
3月前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
4月前
|
机器学习/深度学习 监控 计算机视觉
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)
本文介绍了如何使用YOLOv7进行目标检测,包括环境搭建、数据集准备、模型训练、验证、测试以及常见错误的解决方法。YOLOv7以其高效性能和准确率在目标检测领域受到关注,适用于自动驾驶、安防监控等场景。文中提供了源码和论文链接,以及详细的步骤说明,适合深度学习实践者参考。
959 1
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)