Question

是否有可能使v-for数组成为动态？像这样：

<div v-for="(company, index) in arrayName">
    ....
</div>

数据：

data() {
    return {
        companies: [],
        arrayName: 'companies'
    }
},

Answer 1

可以使用计算属性

来实现

模板：

<div v-for="(company, index) in myArray">
    ....
</div>

实例：

computed: {
  myArray() {
    return this[this.arrayName];
  },
}

Answer 2

我最初的反应是质疑你为什么要这样做！

如果你确定这是你想要的，你可以使用计算属性：

computed: {
    things() {
        return this.$data[this.arrayName];
    }
}

然后您的模板可以循环things。

然而，我可能会采取另一种方法。根据评论中的讨论，使用过滤器的方法可能是：

data() {
    companies,
    filterActive: false
},
computed: {
    things() {
        if (this.filterActive) {
            return this.companies.filter(company => company.isActive);
        }

        return this.companies
    }
}

我假设公司数组包含一些数据，您可以使用这些数据来确定它们是否处于活动状态。

现在你需要做的就是在真假之间切换filterActive。

v-for循环中的动态数组名称

2 个答案: