This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Note in advance, this is a very basic type of article, only suitable for small whites to read, because the following article is based on my notes when I just started. Please take a detour to avoid wasting time, thank you ~

Today I’m going to talk about the problem of not being able to select el-radio after the elemental-UI edit form is displayed. I’m going to talk about the two-way binding of Vue and the default type of El-Radio in the Elemental-UI edit form.

The problem

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

The problem is that after the data is displayed, when I click on other radio to select, I can’t check it.

Found the same problem on the Internet, there is a solution, also did not find the cause.

The online solution: Instead of assigning res.data directly to editPowerForm, you need to assign res.data to let obj, and then obj to editPowerForm.

The reason for this is that editPowerForm does not declare radio, and support for bidirectional data binding in Vue is limited to basic add/remove methods. See the editPowerForm website for more details. In this case, it is a direct assignment to an undeclared variable, so the bidirectional binding is not monitored by vue, i.e., it is not refreshed. Radio is declared before it is assigned to obj, so it can be listened for by bidirectional binding.

A property of an object must be created before it can be listened to by vue bidirectional binding.

Note that radio should be a string by default. If an int is returned, radio will not be selected by default.

As is known to all, when referencing a JS object, the reference is actually an index address, which is why the front end extends the location of the deep copy and shallow copy. When the object only changes, the index value is actually unchanged, that is, the old value and the new value are the same, because they both refer to the same object.

It is also possible to use $set or watch for deep listening. Fortunately, vuE3 now uses proxy to implement bidirectional binding, so you don’t have to worry about array/object changes that can’t be heard!

Afterword.

Hello wow, I am the Antarctic ice, a technology and appearance level is proportional to the front end of the engineer, advocating to nail down the front end of the problem, I hope my blog has helped you. Pay attention to me, the front road together. Hey ~ 😛