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

您的代码可以正常工作，但是可以，但是为了防御起见，最好创建一个方法（或过滤器）以从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>

Answer 2

您可以创建一个计算属性以返回数组中的特定对象。如果该属性是反应性的，则计算所得的结果也将是反应性的，并监视对该属性的更新。

您可以创建一种方法，以按索引或您想要的任何方式在数组中找到某个对象：

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

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

2 个答案: