vue.js - 我可以动态地将计算属性插入到 Vue 组件中吗

Question

我通过遍历大量对象来生成 Vue 组件的内容。我想使用计算属性来确定是否显示某些节点​​，但由于计算引用在循环内使用，我需要能够动态设置引用名称。

下面是我正在尝试做的一个概念性示例。如何根据当前项目更改 showItemX？

<template>
  <ul>
    <li v-for="item in myArr" v-if="showItemX">
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
  export default {
    data() {
      return {
        myArr: [{
          id: 'item1',
          name: 'Item 1'
        }, {
          id: 'item2',
          name: 'Item 2'
        }]
      };
    },
    computed: {
      showItem1: function() {
        return this.$store.state.showItem1;
      },
      showItem2: function() {
        return this.$store.state.showItem2;
      }
    }
  }
</script>

2 种可能的解决方案

到目前为止，这是我考虑过的两条路线，但我不确定哪一条路线效率更高，或者是否首选其他路线:

1。为计算属性返回单个对象

在此选项中，上面的两个计算属性将合并为一个属性:

computed: {
  showItem: function() {
    return {
      item1: this.$store.state.showItem1,
      item2: this.$store.state.showItem2
    }
  }
}

然后 v-if 将被设置为 showItem[item.id]:

<li v-for="item in myArr" v-if="showItem[item.id]">
  {{ item.name }}
</li>

这里的缺点是，似乎每次其中一个依赖项发生变化时，整个对象都会重新计算。

2。使用方法获取对应的计算属性

在这里，我尝试将 item.id 传递给一个方法，作为访问相应计算属性的一种方式:

computed: {
  item1Show: function() {
    return this.$store.state.showItem1;
  },
  item2Show: function() {
    return this.$store.state.showItem2;
  }
},
methods: {
  showItem: function(id) {
    return this[id + 'Show']
  }
}

在模板中:

<li v-for="item in myArr" v-if="showItem(item.id)">
  {{ item.name }}
</li>

同样，在此示例中，我不确定我是否充分利用了计算属性。

---

这些选项中的一个是否应该优于另一个，或者是否有更好的方法来实现我所缺少的？

Answer 1

Vue 和 JavaScript 的优点在于您可以使用适合您需要的任何方法，但是，顺便说一句，我可能会发现类似下面的方法最容易理解

<li v-for="item in myArr" v-if="showItem(item)">
    {{ item.name }}
</li>

然后定义showItem方法，例如

showItem(item) {
    return item.id === "item1" ?
        this.$store.state.showItem1 :
        this.$store.state.showItem2;
}

假设您没有在帖子中未显示的其他任何地方使用计算属性