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>

CodePudding user response：

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>

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>