Как отобразить один объект из массива в VueJs?

Question

Я использую цикл for для отображения списка элементов на моей странице.Как видите, каждый объект объявлен в моем массиве.

const animals = [
  {
    name: "monkey",
    food: "fruit",
    img: "images/fruit.jpg",
  },
  {
    name: "horse",
    food: "hay",
    img: "images/hay.jpg",
  },  
  {
    name: "sealion",
    food: "fish",
    img: "images/fish.jpg",
  }
];

new Vue ({
  el: '#app',
  data: {
    zoo: animals
  }
});

Приведенный ниже код напечатает список животных и продуктов, которые им нравятся, на странице списков.

<ul>
    <li v-for="(item, index) in zoo">
        <p>{{index }} {{ item.name }}</p>
        <p>{{index }} {{ item.food }}</p>
    </li>
</ul>

Однако мне также необходимо использовать информацию, хранящуюся в этом массиве.в другом месте на моем сайте.Но на этот раз не в цикле.

Для отдельной страницы подробностей мне понадобится информация только для третьего животного (позиция индекса 2)

<h2>My favorite animal is a {{ item[2].name }} and it eats {{ item[2].food }} </h2>

Есть ли способ сделать это?

Answer 1

Вы можете создать вычисляемое свойство для возврата определенного объекта в массиве.Если свойство является реактивным, вычисляемое также будет реактивным и будет следить за обновлениями этого свойства.

Вы можете создать метод для поиска определенного объекта в массиве, по индексу или по вашему желанию:

computed: {
  sealion () {
    return animals[2]
  }
},
methods: {
  getAnimal (i) {
    return animals[i]
  },
  getAnimal (name) {
    animals.forEach((animal) => {
      if (animal.name === name) return animal
    }
  }
}

Answer 2

Ваш код будет работать, и все в порядке, но для большей защиты полезно создать метод (или фильтр) для получения конкретного элемента из массива, например, для метода:

methods: {
  getAnimalByIndex({ animals = [], index = 0 }) {
    return animals[index] || {}
  }
}

...и затем используйте в шаблоне, как показано ниже:

<h2>My favorite animal is a {{ getAnimalByIndex({ animals, index: 2 }).name }} and it eats {{ getAnimalByIndex({ animals, index: 2 }).food }} </h2>

Благодаря вышесказанному вы можете предоставить запасное значение или быть уверенным, что все будет в порядке, даже если животные не определены;)

Более того, если вы хотитечтобы всегда получать третье животное, тогда, возможно, будет хорошей идеей использовать вычисленное значение, как показано ниже:

computed: {
  thirdAnimal() {
    return this.animals[2] || {}
  }
}

... и использовать вычисленное значение в шаблоне:

<h2>My favorite animal is a {{ thirdAnimal.name }} and it eats {{ thirdAnimal.food }} </h2>