uuid for v-for key with vue-uuid?

Question

I'm trying to use a random string (UUID v4) with vue-uuid for current items and items added to the list in the future (this is a to-do list type app) but I'm not sure what to correct syntax is.

I installed it and added it to my project in main.js:

import UUID from 'vue-uuid';
Vue.use(UUID);

However, I don't know how to use it in my Vue component. This is what I tried:

Template:

<transition-group
  name="list"
  enter-active-class="animated bounceInUp"
  leave-active-class="animated bounceOutDown"
>
  <li v-for="item in skills" :key="uuid">{{ item.skill }}</li>
</transition-group>

Script:

import { uuid } from 'vue-uuid';

export default {
  name: 'Skills',
  data() {
    return {
      uuid: uuid.v4(),
      skill: '',
      skills: [{ skill: 'Vue.js' }, { skill: 'React' }]
    };
  },
};

For :key="uuid", I get an error saying Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive (vue/valid-v-for). I also tried changing it to :key="item.uuid" which makes that error go away, but then the list doesn't appear.

project repo (based on this Udemy Vue crash course)

Check [this](https://stackoverflow.com/questions/53572459/how-can-i-generate-unique-ids-in-vue-js-from-attributes-in-a-json-file) — ravibagul91, Jan 18 '20 at 02:45
It's not a good practice, but if array don't have unique value to be used as a key then you can use the `index`. For example, `
That's what my code was originally but I wanted to use a unique ID. — nCardot, Jan 18 '20 at 02:59

You Nguyen · Accepted Answer · 2020-01-18T13:23:57.480

Try this:

<template>
  <div id="app">
    <p :key="item.uuid" v-for="item in skills">{{ item.skill }}</p>
  </div>
</template>

<script>
import { uuid } from "vue-uuid";

export default {
  name: "App",
  data() {
    return {
      skills: [
        { uuid: uuid.v4(), skill: "Vue.js" },
        { uuid: uuid.v4(), skill: "React" }
      ]
    };
  }
};
</script>

This is a working demo: https://codesandbox.io/s/nifty-sutherland-b0k9q

UPDATED

to be dynamic

There are two moments that you could add the uuid to each element in the skills array:

1 When adding a new skill:

addSkill() {
  this.$validator.validateAll().then(result => {
    if (result) {
      this.skills.push({ uuid: uuid.v4(), skill: this.skill });
      this.skill = "";
    }
  });
}

2 When rendering them, in this case, you might use a computed property like so:

import { uuid } from 'vue-uuid';

export default {
  name: 'Skills',
  data () {
    return {
      skill: '',
      skills: [{ skill: 'Vue.js' }, { skill: 'React' }]
    };
  },
  computed: {
    computedSkills () {
      return this.skills.map(skill => {...skill, uuid: uuid.v4() })
    }
  }
};

And then using the computedSkills computed property for rendering rather than the skills property. Something like:

<li v-for="item in computedSkills" :key="item.uuid">{{ item.skill }}</li>

That works for the existing items, but this is for a to-do list type app and I can't add keyed items to the list this way. — nCardot, Jan 18 '20 at 03:21
@Natalie What do you mean? You can absolutely use uuid.v4() when creating a new item to set this uuid property so that it’s available in the v-for. You may need to up the question to include how you are adding a new item. — Alexander Staroselsky, Jan 18 '20 at 03:55
Yes, I don't know how to do it for new items. In the original question I was trying to call UUID from within the :key="" in order for it to be dynamic. Updated the question. — nCardot, Jan 18 '20 at 04:14

uuid for v-for key with vue-uuid?

1 Answers1

UPDATED