I'm working with BootstrapVue.
How can I set a unique id each time I'm inputing a new object to my template?
I've just tried to show it in my template (here: {{????}}) to see if its working but only output I get is #
Thanks in advance!
<template>
<div>
<div v-for="idInput in inputs" :key="idInput._id">
<b-form-input class="col-md-6"></b-form-input>#
{{????}}
</div>
<b-button @click="addInput()">Add Input</b-button>
</div>
</template>
<script>
export default {
methods: {
addInput() {
this.inputs.push({});
}
},
data() {
return {
inputs: [{}],
}
}
}
</script>
Use the v-for index parameter, this should give you a unique index for each element.
Try it like this:
<div v-for="(idInput, index) in inputs" :key="index">
<b-form-input class="col-md-6"></b-form-input>#
{{index}}
</div>
You can replace to h2 to anything that you want to give a dynamic Id. Here is my solution (based on an example with h2 element) :
<template>
<div >
<div v-for="(idInput,index) in inputs" :key="index">
<b-form-input class="col-md-6"></b-form-input>#
<h2 :id="idInput._id">{{idInput.text}}</h2>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputs: [{"_id":"first_id","text":"Bobby has"},
{"_id":"second_id","text":"a good taste"},
{"_id":"third_id","text":"for frameworks!"}]
}
},
}
</script>
<style>
#first_id {
color:black;
}
#second_id {
color:red;
}
#third_id {
color: yellow;
}
</style>