在Vue中显示JS对象值

Question

Vue菜鸟在这里...

在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

由于它是数据属性，因此可以在filteredData [i]之类的模板中使用它，其中我可以是数组长度内的任何数字，如果要在计算方法，生命周期方法中使用，则应使用就像this.filteredData [i]一样，这里我可以是数组长度内的任何数字

Answer 3

您可以直接使用{{filteredData [0]}}访问该对象，而要访问其余信息，只需用点号表示即可访问该对象内的属性。

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

记住JS数组索引以0开头。当您在数组中并且要访问要获取数据的特定索引时，它将为[＃]，因为访问了具有对象的索引后，它很容易以点表示法获取该信息。例如：

• filteredData [0] .id
• filteredData [0] .name
• filteredData [0] .logo