CODEWITHSUNDEEP
vue.jsvuejs2
Brice Chaponneau
Brice Chaponneau

Reputation: 602

VuesJS, generate randomkey in v-for loop

Good evening,

My problem is this: I have a loop that displays simple divs. I have a method that specifies the dimensiosn of my div (mandatory in my case). However, when I call the method a second time by changing the sizes of the divs, it does not work because there is no re-render.

To overcome this, I generate a guid on my: key of v-for with a variable such as:

<div v-for="task in tasks" :key="task.id + guid()">...blabla...</div>

Is it possible to generate this code directly during the loop to avoid concatenation?

<div v-for="(task, maVar=guid())  in tasks" :key="maVar">...blabla...</div>

PS : code for guid() method :

guid() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))
}

Thanks

Upvotes: 9

Views: 11256

Answers (3)

Ernist Isabekov
Ernist Isabekov

Reputation: 1233

I do like this

function randomKey() {
   return (new Date()).getTime() + Math.floor(Math.random() * 10000).toString()
}

Upvotes: 1

Valentine Shi
Valentine Shi

Reputation: 7800

There is a simpler, more concise technique shown below. It avoids polluting the iterated object with a redundant property. It can be used when there is no unique property in the objects you iterate over.

First in your viewmodel add the method to generate a random number (e.g. with Lodash random)

var random = require('lodash.random');

methods: {
    random() {
        return random(1000);
    }
}

Then in your template reveal the index in v-for and randomize it in v-bind:key with your random() method from the viewmodel by concatenation.

<div v-for="(task, index) in tasks" v-bind:key="index + random()">
    // Some markup
</div>

This is as clean as easy.

However note this approach would force redrawing each item in the list instead of replacing only items that differ. This will reset previously drawn state (if any) for unchanged items.

Upvotes: 1

Richard Matsen
Richard Matsen

Reputation: 23463

You could create a computed property that returns an array of task with a guid added, or if you want to leave tasks untouched, return an object containing each task plus a guid,

computed: {
  tasksWithGuid: function() {
    return this.tasks.map(task => { return {task, key: task.id + guid() } })
  }
}

<div v-for="taskWithGuid in tasksWithGuid" :key="taskWithGuid.key">
  {{taskWithGuid.task.someProperty}}
</div>

Upvotes: 3

Related Questions