#javascript #vue.js #vuejs2
Вопрос:
Я работаю с BootstrapVue ним .
Как я могу устанавливать уникальный id каждый раз, когда я добавляю новый объект в свой шаблон?
Я только что попытался показать его в своем шаблоне (здесь: {{????}} ), чтобы увидеть, работает ли он, но я получаю только вывод #
Заранее спасибо!
lt;templategt; lt;divgt; lt;div v-for="idInput in inputs" :key="idInput._id"gt; lt;b-form-input class="col-md-6"gt;lt;/b-form-inputgt;# {{????}} lt;/divgt; lt;b-button @click="addInput()"gt;Add Inputlt;/b-buttongt; lt;/divgt; lt;/templategt; lt;scriptgt; export default { methods: { addInput() { this.inputs.push({}); } }, data() { return { inputs: [{}], } } } lt;/scriptgt; Комментарии:
1. попробуйте использовать индекс в вашем v-for и используйте его в качестве идентификатора!
2. Пожалуйста, более четко сформулируйте вопрос о том, чего именно вы пытаетесь достичь.
3. Здравствуйте, но когда я использую индекс в качестве своего идентификатора и буду что-то удалять в будущем, идентификатор будет реагировать.. но мне нужно, чтобы он был уникальным..
4. Ну, есть несколько вещей, о которых вы не говорите в своем вопросе. Откуда вы берете предметы? БД? Или вы генерируете их в цикле for? Если это так, то вы можете использовать хэш MD5 над объектом, чтобы получить уникальный идентификатор или что-то еще, что вам нравится … но на самом деле не совсем ясно, что вы пытаетесь сделать …
Ответ №1:
Используйте параметр v-для индекса, это должно дать вам уникальный индекс для каждого элемента.
Попробуй вот так:
lt;div v-for="(idInput, index) in inputs" :key="index"gt; lt;b-form-input class="col-md-6"gt;lt;/b-form-inputgt;# {{index}} lt;/divgt; Ответ №2:
Вы можете заменить на h2 все, чему хотите присвоить динамический идентификатор. Вот мое решение (на примере с элементом h2) :
lt;templategt; lt;div gt; lt;div v-for="(idInput,index) in inputs" :key="index"gt; lt;b-form-input class="col-md-6"gt;lt;/b-form-inputgt;# lt;h2 :id="idInput._id"gt;{{idInput.text}}lt;/h2gt; lt;/divgt; lt;/divgt; lt;/templategt; lt;scriptgt; export default { data() { return { inputs: [{"_id":"first_id","text":"Bobby has"}, {"_id":"second_id","text":"a good taste"}, {"_id":"third_id","text":"for frameworks!"}] } }, } lt;/scriptgt; lt;stylegt; #first_id { color:black; } #second_id { color:red; } #third_id { color: yellow; } lt;/stylegt; Комментарии:
1. Я не понизил голос … , но из любопытства, почему вы вводите здесь элемент h2? _ид должен быть уникальным, как я понял ОПЕРАЦИЮ? Кроме того, они хотят продвинуть это в массив, насколько я могу видеть … так что ваша реализация немного странная … вот почему некоторые высказались бы против этого …
2. Спасибо за ваш комментарий. Я думал, ему нужен элемент, идентификатор которого был сгенерирован v-для. В то время как он каждый раз запрашивал только уникальное значение ключа. Спасибо за разъяснение.
3. Честно говоря, вопрос следует отметить, потому что не на 100% ясно, о чем спрашивает ОП …