Vue realizes the function of clicking on the new subsidiary in the form pop-up box of the new unit.

problem description

1010:
:

clipboard.png

:

clipboard.png

vuehtml:


:

clipboard.png

if I remove: key= "index", I will not report an error, but it should not be so. There is another problem. In the new process, the key name of the v-model binding of the form is the same, so the value in the input box is to write one, and multiple values are the same. Another thing is that it is not clear that this value should be consistent with getting

.

what result do you expect? What is the error message actually seen?

the expected result is that you can click on the new subsidiaries in this way, and each click on the input box in the new panel has no impact on other subsidiaries, and the values of these subsidiaries can be obtained normally.

at present, I don"t quite understand this piece, and I don"t know how to deal with it in many cases when I convert it into vue, so I would like to ask for advice here. Please don"t hesitate to give me advice.
Thank you!


v-for="subcompany in subcompanyList" :key="subcompany.name"

then js partially removes the subcompany object from the data.


in vue, : key is used to facilitate vue to identify DOM, so that if you encounter the same key as before, you don't have to render, saving time. So write with a simple recognizable value, such as id, or index.

your problem is that index in list gets an object in list, not a real index. You can just (subCompany, index) in list .

it is recommended to read the document twice.


error message says, please use a primitive value as key. The resulting index is an object, not a prized value, for "index in list". This may be what you want to do. "(item,index) in list"

)
Menu