Помогите исправить ошибку при решении задачи - Vue

Question

Вообщем у нас есть массив с объектами, в каждом объекте есть имя, ID и остальные данные. Задача заключается в том чтобы на экран выводились все имена и по нажатию одного из имени рядом выводилось именно остальные данные это имени. Для этого я использовал v-show, но проблема в том что он выводит сразу все данные из всех объектов. Так как я новичек в Vue я не особо понемаю как сделать так чтобы он выводил данные только одного имени на который нажимаю.

<script>
export default{
  data(){
    return{
      infoList: [
        {
          id: 1,
          nume: "Andrei",
          phone: "06934324",
          email: "[email protected]"
        },
        {
          id: 2,
          nume: "Cristian",
          phone: "06937543",
          email: "[email protected]"
        },
        {
          id: 3,
          nume: "Jhon",
          phone: "069356564",
          email: "[email protected]"
        },
      ],
      resultList: [],
      show: false
    }
  },
  methods: {
    openInfo(){
      this.show = !this.show
    }
  }
}
</script>

<template>
  <div id="information">
    <ul>
      <li v-for="item in infoList" :key="item.id" @click="openInfo(item.id)" >
        {{ item.nume }}
      </li>
    </ul>
    <div v-for="index in infoList" :key="index.id">
        <div v-show="this.show" >
          Phone: {{ index.phone }} <br/>
          Email: {{ index.email }}
        </div>
    </div>
  </div>
</template>

Answer 1

Ну Вы все выводите – все и выводятся. У Вас нет обработки состояния. v-show лишь отражает, показывать что-то или нет, но не знает, что именно отображать. Поэтому Вам нужно записать id и проверять его:

<script>
export default{
  data(){
    return{
      infoList: [
        {
          id: 1,
          nume: "Andrei",
          phone: "06934324",
          email: "[email protected]"
        },
        {
          id: 2,
          nume: "Cristian",
          phone: "06937543",
          email: "[email protected]"
        },
        {
          id: 3,
          nume: "Jhon",
          phone: "069356564",
          email: "[email protected]"
        },
      ],
      resultList: [],
      show: null,
    }
  },
  methods: {
    openInfo(id){
      this.show = id
    }
  }
}
</script>

<template>
  <div id="information">
    <ul>
      <li v-for="item in infoList" :key="item.id" @click="openInfo(item.id)" >
        {{ item.nume }}
      </li>
    </ul>
    <div v-for="item in infoList" :key="item.id">
        <div v-show="show === item.id" >
          Phone: {{ item.phone }} <br/>
          Email: {{ item.email }}
        </div>
    </div>
  </div>
</template>

БЛОГ НА HUSL

Помогите исправить ошибку при решении задачи - Vue

Ответы (1 шт):