Блог

Привет, в моем приложении 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, на который я нажал?

Пожалуйста, проверьте 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">
 

Вы можете определить переменную индекса в самом цикле v-for. Нравится

 <div v-for="(person,index) in persons" :key="index">
    {{index}} //which is index of current item
</div>