#javascript #html #vue.js
#javascript #HTML #vue.js
Вопрос:
Привет, в моем приложении Vue у меня есть возможность создать несколько человек:
<div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)" v-show="true">
<!-- Head of part personal data -->
<h4 class="person" style="margin-left: 0.95vw">Person 1</h4>
<!-- Enter Person Data -->
<testmodul1></testmodul1>
<div class="trash">
<button class="btn btn-outline-danger" @click="deletePerson()">Person löschen</button>
</div>
<hr />
</div>
Если я хочу добавить больше пользователей, есть кнопка, которая добавляет больше вводимых данных:
<button class="btn btn-outline-secondary" @click="useIt()">Add more persons</button>
useIt(){
this.temp.push({
id:this.id =1
})
console.log(this.temp);
},
data() {
return {
id:0,
temp:[{
id:0,
}]
};
},
Вывод консоли.метод регистрации в консоли (нажал кнопку добавить 2 раза):
Proxy {0: {…}, 1: {…}, 2: {…}}
[[Handler]]: Object
[[Target]]: Array(2)
0: {id: 0}
1: {id: 0}
length: 2
[[Prototype]]: Array(0)
Теперь следующая проблема: допустим, например, мы создали 3 новых человека. Теперь я понимаю, что второе лицо является ложным, и я хочу его удалить. Когда я нажимаю на of person 2, я хочу получить индекс массива html-элемента. Я уже пробовал это, но на самом деле это работает не очень хорошо:
<div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)" v-show="true">
showId(index){
alert(index);
}
Есть ли другой способ, как я мог бы узнать индекс в массиве html div, на который я нажал?
Комментарии:
1. «на самом деле не очень хорошо работает» — что именно означает? Что предупреждается?
Ответ №1:
Пожалуйста, проверьте Vue.js визуализация списка.
Вы можете перебирать массив как с элементом, так и с индексом следующим образом:
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
Для вашего случая:
<div v-for="(newContent, index) in temp" :key="newContent.id" @click="showId(index)" v-show="true">
Ответ №2:
Вы можете определить переменную индекса в самом цикле v-for. Нравится
<div v-for="(person,index) in persons" :key="index">
{{index}} //which is index of current item
</div>