Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "can the key value of the v-for instruction in vue be index?". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Why can't the key value of v-for be index?

Take a look at my online bug demo:

Parent component code list: [{count: 1, name: 'first element'}, {count: 2, name: 'second element'}, {count: 3, name: 'third element'}] handleDelete (index) {this.list.splice (index, 1)}

Wait a minute, the count value of the third element has become 2.

I was so surprised that I looked at the code of all the sub-components again.

The sub-component {{name}} count value is: {{innerCount}}-props: {count: {type: Number, default: 0}, name: {type: String, default:''}}, data () {return {innerCount: this.count}}

There's nothing wrong with it.

Not believing in evil, I created more elements to delete and tried sorting: sure enough, there was a problem not only in deleting elements, but also in sorting.

Change the key value to item.name and try again.

It's normal.

In this way, it is very dangerous to write the key value as index in v-for.

After consulting the official vue documentation, I finally understood the reason:

When Vue is updating the list of elements rendered with v-for, it defaults to the Update in place policy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will update each element in place and ensure that they are rendered correctly at each index location.

This default mode is efficient, but only for list rendered output that does not depend on the subcomponent state or temporary DOM state (for example, form input values).

Does not depend on the state of the subcomponent

There is a critical line of code in the subcomponent

Data () {return {innerCount: this.count}}

InnerCount is defined within the subcomponent so that the component has its own state, and according to the official documentation, index cannot be taken as the key value in this case.

Temporary DOM statu

Delete

Item 2 is deleted, but item 3 becomes 2 in 3 in the form, as in the example above that relies on the state of the subcomponent.

This is the end of the content of "can the key value of the v-for instruction in vue be index?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.