在Vue中显示JS对象值

Question

我是新手..。

在我的一个Vue应用程序的路由中，我在DevTools中显示了这个JS对象。例如，如何访问/显示filteredData:Array[1]中的值

​

​

Answer 1

只要您的数据是在data属性中分配的(请记住getter/setter注意事项)，您就可以在模板中使用该变量：

<template>
  <div>{{filteredData[0]}}</div>
</template>

<script>
  export default {
    data() {
      return {
        filteredData: filteredData, // assign your data here
      }
    }
  }
</script>

Answer 2

因为它是一个数据属性，你可以在像filteredDatai这样的模板中使用它，其中i可以是数组长度内的任何数字，如果你想在computed、methods或生命周期方法中使用它，那么你应该像this.filteredDatai一样使用它，在这里i可以是数组长度内的任何数字

Answer 3

您可以使用{{filteredData}}直接访问对象，要访问其余信息，您只需使用点符号来访问该对象中的属性。

<div>{{filteredData[0].id}}</div>

请记住，在JS数组中，索引从0开始。当你在一个数组中，要访问特定的索引，你必须获取数据，它将是# then，因为访问了有一个对象的索引，所以很容易用点符号来获取信息。对于您的示例：

• filteredData.id
• filteredData.name
• filteredData.logo