Estoy trabajando con BootstrapVue .
¿Cómo puedo establecer una id única cada vez que ingreso un nuevo objeto en mi plantilla?
Acabo de intentar mostrarlo en mi plantilla (aquí: {{????}} ) para ver si funciona, pero el único resultado que obtengo es #
¡Gracias por adelantado!
<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 el parámetro de índice v-for, esto debería darle un índice único para cada elemento.
Pruébalo así:
<div v-for="(idInput, index) in inputs" :key="index"> <b-form-input class="col-md-6"></b-form-input># {{index}} </div>Puede reemplazar a h2 a cualquier cosa que desee dar una identificación dinámica. Aquí está mi solución (basada en un ejemplo con el elemento h2):
<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>