Vuejs key in v-for loop with simple array

Question

I want to build a dynamic form with list groups and user can add, remove and reorder them, with transition. But i dont know how to set key for each item inside v-for loop. As document say use object as key is bad idea, or use index as same as not use key at all. Could anyone show me a good solution for this.

<div id="root">     
    <transition-group name="flip-list" tag="div">
        <div class="form-group" v-for="(item, index) in items" :key="what key to use">              
            <input type="text" name="name" v-model="item.name">
            <input type="tel" name="tel" v-model="item.tel">
        </div>
    </transition-group>
    <button @click="add_item">Add</button>      
</div>

<script>
     new Vue({
        el: '#root',
        data: {
            items: []               
        },
        methods: {
            add_item: function () {
                this.items.push({
                    name: '',
                    tel: ''
                })
            }
        }           
    })
</script>

James Coyle · Accepted Answer · 2019-03-15 10:08:02Z

2

The key should be a unique identifier for the items you are iterating over. Usually that is an id field on the item or some other field that is unique to that item. If you don't have anything like that, I'd either add a field to your items, combine multiple fields in a way that generates a unique key, or just use the index. It really depends on the use-case.

For your purpose, you probably want to add an index/id to your items to track the original order so that vue can handle the transitions properly when you alter that ordering.

answered Mar 15, 2019 at 10:08

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Riddhi · Accepted Answer · 2019-03-15 10:18:55Z

2

If you are having a simple array and don't have unique id's for each element then you can go with using index of loop as below.

 <div class="form-group" v-for="(item, index) in items" key="index">

But rather it is always preferred that you add unique index to each of your elements within the array and use that as key as shown below.

<div class="form-group" v-for="(item, index) in items" :key="item.id">

answered Mar 15, 2019 at 10:18

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

Comments

ADJenks · Accepted Answer · 2019-05-16 22:50:59Z

1

I found that if you use the index as a key, you'll get errors when keys are removed. For example, if it expects the array to have [a,b,c], then you remove b. c now has key of index 1. This makes it think that b was never removed but it believes that c was removed, so it renders the list by getting rid of the DOM elements for item c instead of item b.

answered May 16, 2019 at 22:50

ADJenks

3,46231 silver badges44 bronze badges

Collectives™ on Stack Overflow

Vuejs key in v-for loop with simple array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related