Vue中不使用v-for如何获取数组对象的active属性值

你的Vue实例代码：

new Vue({
  data: {
      ban : [{
          name : 'folder1',
          active : 1,
        },
        {
          name : 'folder2',
          active : 0,
        },
      ]
    }
  }
})

我在Vue项目中遇到如下问题：需要不使用v-for获取数组对象中的active属性值。我尝试使用$ban[0]可以获取到第一个对象，但使用$ban[0].active时却出现报错，请问该如何解决？

解决方法 #

你错误地使用了$ban这个写法，Vue中访问data里的属性有两种正确方式：

• 在模板中：直接写ban[0].active即可，不需要加$前缀。示例：

  <div>{{ ban[0].active }}</div>
  

• 在实例的方法、生命周期钩子中：必须通过this访问data属性。示例：

  mounted() {
    console.log(this.ban[0].active); // 输出1
  }
  

额外注意 #

如果ban数组可能初始为空，建议加判断避免报错：

• 模板中：

  <div>{{ ban.length > 0 ? ban[0].active : '' }}</div>
  

• JS逻辑中：

  if (this.ban?.length) {
    console.log(this.ban[0].active);
  }
  

内容的提问来源于stack exchange，提问作者Alexey