医院网站建设运营方案,免费网站搭建系统,新的购物网站怎么做流量分析,杭州做网站情景阐述
弹窗内部有一个挑选框#xff0c;要通过请求接口获取挑选框下面可供选择的数据。
这是一个很简单的情境#xff0c;我立刻有了自己的思路。如果实现搜索#xff0c;数据较少可以直接用elementplus自带的filter。如果数据较多#xff0c;就需要传val#xff0c;…情景阐述
弹窗内部有一个挑选框要通过请求接口获取挑选框下面可供选择的数据。
这是一个很简单的情境我立刻有了自己的思路。如果实现搜索数据较少可以直接用elementplus自带的filter。如果数据较多就需要传val在后台进行搜索然后分页渲染。我选择的是前者所以只需要把数据渲染上去就可以。
我的做法也很标准我定义了一个option因为获取的一定是个数组类型的数据里面会有对象对象中的属性是label。就类似于这种
const pingminOptions reactive([{value: ,label: }
])做好一切准备工作后我就请求后端接口拿到了一个新的数组。并把数组的值赋值给了pingminOptiions。
随后发现响应式出现问题数据更改成功但是没有办法实现在页面上渲染。数据的单向绑定出现问题
发现问题的过程
我和我的组长一起改了很久因为前面的人的代码很乱一开始都是用let来定义所以看不出问题。但是一旦是const就出现报错。
const报错说明这个引用型数据的存放位置都发生了变化。
前面我们定义了一个响应式数据pingminOptions如果我们获取到的是data.records。那么
pingminOptions data.records这样的做法会导致数据存放位置发生变化而且原先的data.records并不是一个响应式数据所以新定义的pingminOptions的响应式也失效了。
正确做法
正确的做法我们可以给pingmingOptions中
const pingmingOptions {option: []
}定义一个option来存放数据。接着我们就可以把data.records的值给option。
为什么要这么做
这么做的原因是用reactive定义出来的数据内部的对象或者数组也是响应式的它是深层次的。所以我们不用担心pingmingOptions的响应式失效问题。
关于toRefs
在和组长交流的过程中我们也曾一度考虑是不是没有用到toRefs的问题于是也复习了toRefs。toRefs的作用一般用于解构。
比如我的state对象中有很多数据有state.astate.bstate.c。
我在渲染页面的时候每次都要带上state。非常的不方便。因此就可以toRefs(state)这样的话相当于给abc都变成了一个响应式的属性。那么我们在使用的时候模板语法中可以直接把abc写出来。这样就方便了书写。
需要注意的是仅仅是在页面渲染的时候才能简写。
