Data disorder occurs when the n-th row of the subcomponent list generated by V-for is deleted

As shown in the following figure

After clicking the delete button , Data disorder occurs

Consult official documents , Found that when Vue Updating usage  v-for  When rendering a list of elements , It uses by default “ in-place update ” The strategy of . If the order of data items is changed ,Vue Will not move DOM Element to match the order of data items , Instead, each element is updated in place , And make sure they render correctly at each index location .

This default mode is efficient , however Only applicable to non dependent sub component status or temporary DOM state ( for example ： Form input value ) List render output for .

To give Vue A hint , So that it can track the identity of each node , To reuse and reorder existing elements , You need to provide a unique  key attribute：

  Look at the code ,v-for Generated components , The binding is key May not be the only value , Can't bind index

So I gave it to v-for Component's key Bind a getTime(), Think of this every key The value will not be repeated , And it's the only one

After testing , Found deleted rows , The page data disorder is solved , But other problems arise , The cascade selector cannot be selected for the first time , The second time you can , After debugging, it is found that each operation of the cascade selector ,@change Bound functions console Will print twice . Add row each time , The data in the previous row will be empty , I can't figure it out , Another big circle ,

‘

 

 

  collapsed 10 Minutes later , I went to check the official explanation ,key  Special attribute Mainly used in Vue The virtual DOM Algorithm , New and old nodes Identification in contrast VNodes. If not used key,Vue Will use a way to minimize dynamic elements and try to modify them in place as much as possible / Algorithms for reusing elements of the same type . While using key when , It will be based on key Changes to reorder elements , And it will be removed key Elements that do not exist .

Child elements with the same parent must have Distinctive key. Repetitive key Can cause rendering errors .

Found directly in dom It says in it getTime(), Of each generated component key It's all dynamic , Although every key It's all unique , But like this key It's meaningless , Every time key Changed , The element will be re rendered , So every time you add a row , The previous data is also empty , Every operation dom, All generate new , Instead of taking the old DOM To update the location , This will cause performance problems .

After modification, a unique... Is generated in the data key, And then in dom The binding , So there is no problem

 

 

link

The list of rendering — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95