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.
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,
}
}
}