javascript - 如何显示VueJs中数组中的单个对象？

我正在使用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>

有没有办法做到这一点？

最佳答案

您的代码可以正常工作，但是可以，但为了防御起见，最好创建一个方法（或过滤器）以从Array中获取特定元素，例如：

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>

关于javascript - 如何显示VueJs中数组中的单个对象？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54430398/