如何在 vue 中的 v-for 中为所有情况停用或定义 v-if？

Question

我有一个 v-for，我在其中使用了 v-if。如果变量 choice 的值为“a”，则只显示 label.type 为“a”的元素。如果“b”显示带有label.type的元素是“b”。如何让 v-if 显示所有内容，例如 choice 的值为“c”？是否可以停用 v-if 之类的东西？有更简单的方法吗？

<v-card v-for="label in labels" v-bind:item="label" v-bind:key="label._id">
  <div v-if="label.type === filter> {{ label.key }}
  </div>
</v-card>

  computed: {
    filter() {
      let filter= this.choice === "a"? "a" : "b";
      return filter;
    }
  }

Answer 1

我可能只是在一个方法中评估你的 if，然后你可以添加你需要的所有额外逻辑。

methods: {
  shouldDisplayLabel(type) {
    // if choice is c, display everything
    if(this.choice === 'c') return true;

    // check if choice matches the label type
    return this.choice === type;
  }
}

那么您的模板可能如下所示：

<v-card v-for="label in labels" v-bind:item="label" v-bind:key="label._id">
  <div v-if="shouldDisplayLabel(label.type)"> {{ label.key }}
  </div>
</v-card>

如何在 vue 中的 v-for 中为所有情况停用或定义 v-if？

How to deactivate or define for all cases v-if in v-for in vue?

javascript

filter

vue.js

v-for

vuetify.js