Is it possible to generate unique identifiers for v-for keys using vue-uuid?

Question

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

I'm attempting to utilize a random string (UUID v4) using vue-uuid for existing items and future additions to the list in my to-do list style application. However, I'm uncertain about the correct syntax to use.

After installation, I included it in my project's main.js file:

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

Despite this, I am unsure of how to implement it within my Vue component. Here is what I have attempted:

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' }]
    };
  },
};

When using the :key="uuid", an error arises stating

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 resolves the error but causes the list not to display.

project repository (built upon this Udemy Vue crash course)

javascript vue.js

Answer 1

Answer №1

Give this a try:

<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>

Check out this working example: https://codesandbox.io/s/nifty-sutherland-b0k9q

UPDATE

to make it dynamic

You can add the unique uuid to each element in the skills array at two different points:

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, you can use a computed property like this:

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() })
    }
  }
};

Then, utilize the computedSkills computed property for rendering instead of the skills property. For example:

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

Answer 2

Give this a try:

<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>

Check out this working example: https://codesandbox.io/s/nifty-sutherland-b0k9q

UPDATE

to make it dynamic

You can add the unique uuid to each element in the skills array at two different points:

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, you can use a computed property like this:

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() })
    }
  }
};

Then, utilize the computedSkills computed property for rendering instead of the skills property. For example:

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

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

Answer №1

UPDATE

Similar questions

Chrome extensions using Cross-Origin XMLHttpRequest

Converting XML to JSON using UTF-8 Encoding

What are the steps for utilizing CSS Global Variables?

Is it advisable to employ jQuery(this) in this specific scenario?

The minification of HTML scripts may cause problems with the <script> tag

Is there a way to adjust this angular2 service to make it slightly more synchronous?

Effortlessly move and place items across different browser windows or tabs

Interactive Component overlying Layer - HTML/CSS

I'm looking to create an array of tags that contain various intersecting values within objectArray

Adding a jPlayer on the fly

The es6 object class is not defined

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

Dynamically showcasing content in an HTML table

React Native package identifies a primary module for handling HTTPS requests

Using PHP to submit a form depending on user selection

Avoiding conflicts between banners, text, and images for HTML/CSS design

Steps for inserting an additional header in an Angular table

Issue with clientHeight not functioning properly with line breaks in Angular 2 application after ngAfterViewInit

Unable to verify POST $http request using $httpBackend

Opera's compatibility with jQuery's Append method allows developers to