Solve the problem that element edit form el-radio cannot be selected after echoing

Preface

I would like to point out in advance that this is a very basic article and is only suitable for beginners, because the following article content comes from my notes when I first entered the industry. Dear experts, please take a detour to avoid wasting time, thank you~

Today, let's talk about the problem that el-radio in the element-ui edit form cannot be selected after echoing. It mainly involves the two-way binding of vue and the default type of el-radio in the element-ui edit form.

question

This is a bug that has troubled me for half the morning. The form style and code are as follows.

The problem is that after the data is echoed, when I click on other radios to select something, I can't check it.

I found the same problem online, with a solution, but still couldn't find the cause.

Online solutions

Originally, the data res.data obtained from the background was directly assigned to editPowerForm. Now you need to assign res.data to let obj first, and then assign obj to editPowerForm.

The reason is that editPowerForm does not declare the variable radio. The support for two-way data binding in Vue is limited to basic addition and deletion methods. For details, see the official website. Here it is equivalent to directly assigning a value to an undeclared variable, so the two-way binding will not be listened to by Vue, that is, there is no refresh. Assigning the value to obj first is equivalent to declaring the radio before assigning the value, so it can be listened to by two-way binding.

It's a bit confusing, but in short, a certain attribute of the object must be created first before it can be listened to by Vue's two-way binding.

Also note that:

The value of the radio should be of string type by default. If the value returned by the background is of int type, the radio will not be selected by default.

As we all know, when referencing a js object, what is referenced is actually an index address. That is why the front end extends the deep copy and shallow copy. When only changes occur within the object, the index value is actually unchanged, that is, the old value is the same as the new value, because their indexes point to the same object.

In fact, it is also possible to directly use $set or watch for deep monitoring. Fortunately, now we use proxy in vue3 to implement two-way binding, so we no longer have to worry about the problem of not being able to monitor changes in arrays/objects!

This is the end of this article about how to solve the problem of element editing form el-radio echo not being able to select. For more related content about el-radio echo not being able to select, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!