create unique key in vue v-for loop

Question

following some research across the web, i understand i should add index to the loop and then add it as a key. how would you suggest creating a unique key for both td's in the following code:

      <template v-for="lesson in lessons">
        <td @click="sort(lesson.questions)" :key="lesson.lessonId">
           questions
        </td>
        <td @click="sort(lesson.grade)" :key="lesson.lessonId">
           grade
        </td>
      </template>

the only idea i had was to add index to the loop and then have the second index as follows:

:key="`${lesson.lessonId}+1`"

but that feels a bit odd and error prone, am i right?

Moumen Soliman · Accepted Answer · 2018-12-30 09:56:30Z

4

There are 2 ways,

first is add the static number as you mentioned:

:key="`${lesson.lessonId}567`"

Second is generate a new ID, and you will using uuid version 4 package, that will generate random id for you,

<template>
 :key="generateID"
</template>


<script>
const uuidv4 = require('uuid/v4');

module.exports = {
  data: function () {
    return {
      generateID: uuidv4();
    }
  }
}
</script>

answered Dec 30, 2018 at 9:56

Moumen Soliman

1,6941 gold badge17 silver badges21 bronze badges

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

Comments

Maga · Accepted Answer · 2018-12-30 10:38:31Z

0

The special attribute 'key' can be either 'numeric' or 'string', to solve the problem you can prefix your lessonId with a string

  <template v-for="lesson in lessons">
    <td @click="sort(lesson.questions)" :key="`question_${lesson.lessonId}`">
       questions
    </td>
    <td @click="sort(lesson.grade)" :key="`grade_${lesson.lessonId}`">
       grade
    </td>
  </template>`

answered Dec 30, 2018 at 10:38

Maga

812 bronze badges

Comments

Hamilton Gabriel · Accepted Answer · 2018-12-30 13:48:36Z

0

<ul id="example-2">
  <li v-for="(item, index) in items" :key="key(index, item)">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  },
  methods: {
    key (index, item) {
        return `${index}${item.message}`
    }
  }
})

answered Dec 30, 2018 at 13:48

Hamilton Gabriel

3651 silver badge6 bronze badges

Collectives™ on Stack Overflow

create unique key in vue v-for loop

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