Generate uuid for input id

Question

I want to generate random IDs for my input fields inside a v-for loop:

<div v-for="(data) in form" :key="data.attribute">
  <input type="date" :min="today" :id="_ + uuid()" :name="data.attribute" :placeholder="data.default_value" :readonly="data.render_type == 'readonly'" v-model="data.value" @input.prevent="updateOuter($event, data.refresh, 'due_date')"... 

using uuid:

const uuid = () => {
    return v4();
};

When now changing the input value the ID is getting changed every time cause uuid() is called. How would I generate fixed IDs for the input field using uuid? The form data object doesn't provide unique properties I could use cause elements could appear multiple times on the page.

Answer 1

I think, you should create additional object like ids in data and generate uuid there like below;

<div v-for="(data) in form" :key="data.attribute">
  <input type="date" :min="today" :id="ids[data.attribute]" :name="data.attribute" />
</div>


{
  data(){
   const ids = form.reduce((res, item) => {
     res[item.attribute]= v4();
     return res;
   }, {});

   return {
     ids,

   }
  }
}