Scenario elaboration
There is a selection box inside the pop-up window, and the data available for selection under the selection box must be obtained through the request interface.
It was a very simple situation, and I immediately had my own ideas. If you implement search and there is less data, you can directly use the filter that comes with elementplus. If there is a lot of data, you need to pass val, search in the background, and then render in pages. I chose the former, so I only need to render the data.
My approach is also very standard. I defined an option, because what I get must be an array type of data. There will be objects in it, and the attribute in the object is label. Something like this:
const pingminOptions = reactive([
{
value: '',
label: ''
}
])
After making all preparations, I requested the backend interface and got a new array. And assign the value of the array to pingminOptions.
Later, it was discovered that there was a problem with the responsiveness. The data was changed successfully, but there was no way to render it on the page. (There is a problem with the one-way binding of data)
The process of finding the problem
My team leader and I worked together for a long time to change it, because the code of the previous person was very messy, and they were all defined using let at the beginning, so we couldn't see the problem. But once it is const, an error will appear.
A const error indicates that the storage location of this reference data has changed.
Earlier we defined a responsive data pingminOptions, if what we get is data.records. So:
pingminOptions = data.records
This approach will cause the data storage location to change, and the original data.records is not a responsive data, so the responsiveness of the newly defined pingminOptions is also invalid.
Correct approach
The correct approach, we can give pingmingOptions:
const pingmingOptions = {
option: []
}
Define an option to store data. Then we can give the value of data.records to option.
Why do this?
The reason for this is that the data defined with reactive, the internal objects or arrays are also reactive, and they are deep-level. So we don't have to worry about the responsive failure of pingmingOptions.
About toRefs
During the communication with the team leader, we once considered whether toRefs was not used, so we also reviewed toRefs. The role of toRefs is generally used for deconstruction.
For example, there is a lot of data in my state object, including state.a, state.b, and state.c.
When I render the page, I have to bring state every time. Very inconvenient. Therefore, you can use toRefs(state). In this case, it is equivalent to turning a, b, and c into a responsive attribute. Then when we use it, we can directly write a, b, c in the template syntax. This makes writing easier.
It should be noted that this can only be abbreviated when the page is rendered.