Vue is a lightweight mvvm framework that follows object-oriented thinking and makes actual operation convenient. However, if used improperly, you will face the risk of rushing to trap pits everywhere. The purpose of writing this article is to search the problem I encountered online for a long time but found no solution. Finally, I studied the part about select elements in the source code of vue and found the answer. Here is a brief introduction to a pit I stepped on about select:
Usage scenario: There are two select elements. When one select element changes, the content filled in another select is dynamically modified and the first item is selected by default. The problem is, every time I submit form data, I found that the data corresponding to the slave element has not been updated to the relevant attributes of the response vue object. Strangely, when I use jquery to obtain the val() method of the select, the question is: Why does the value of the element change but has not been updated to the relevant attributes of the vue object?
Related source code in vue:
// attach listener
= function () {
var value = getValue(el, multiple);
value = ? isArray(value) ? (toNumber) : toNumber(value) : value;
(value);
};
('change', );
I saw that only the change event of select will trigger the value of the select element to be updated to the vue object related attributes. However, when I use select, the content from select is added by me using js code. Selecting the first item is also an append code, so that the listener function of select in vue is not triggered. Of course, this situation only occurs when saving data, without changing the content from select, and adopting the default first item, so if the user selects other items of select and then switches back to the first item, the event can be triggered to complete the vue object attribute change.
The above solution is not friendly enough, and users will be disgusted with this operation. So how to solve it?
I'm giving my solution here: after using js code to append content to select, use changing the corresponding vue object attributes from select to achieve the default selection of the first item.
The above article solves the problem that vue select has not been updated to the vue object attributes. This is all the content I have shared with you. I hope it can give you a reference and I hope you can support me more.