Scenario Explanation
There is a selection box inside the pop-up window, and you need to obtain the data available below the selection box through the request interface.
This is a very simple situation, and I immediately had my own ideas. If you implement search, you can use the filter that comes with elementplus directly if you have less data. If there is a lot of data, you need to pass val, search in the background, and then render it paginatedly. I chose the former, so I just need to render the data.
My approach is also very standard. I defined an option because the retrieved must be an array-type data, and there will be objects inside, and the attribute in the object is label. Just like this:
const pingminOptions = reactive([
{
value: '',
label: ''
}
])After making all the preparations, I requested the backend interface and got a new array. And assign the value of the array to pingminOptions.
Then I found a responsive problem and the data changed successfully, but there was no way to render on the page. (There is a problem with one-way binding of data)
The process of discovering problems
My team leader and I have changed it for a long time, because the code of the previous person is very messy and they are defined by lets at the beginning, so there is no problem. But once it is a const, an error will occur.
A const error indicates that the storage location of this referenced data has changed.
Previously we defined a responsive data pingminOptions if we get it. So:
pingminOptions =
This approach will cause changes in the data storage location, and the original one was not a responsive data, so the responsiveness of the newly defined pingminOptions also fails.
The correct way to do it
For the correct way, we can give pingmingOptions:
const pingmingOptions = {
option: []
}Define an option to store data. Then we can give the value to option.
Why do it?
The reason for this is that the internal objects or arrays of data defined using reactive are also responsive, and it is deep. So we don't have to worry about the responsive failure of pingmingOptions.
About toRefs
During the communication with the group leader, we also 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, there is,.
When I render the page, I always bring state. Very inconvenient. Therefore, it can be used toRefs(state), which is equivalent to making a, b, and c a responsive attributes. So when we use it, we can write a, b, and c directly in the template syntax. This makes writing easier.
It should be noted that it can only be abbreviated when the page is rendered.
This is the article about the solution to reactive reactive failure in Vue3. For more related content on reactive reactive failure, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!