Question

我很好奇有没有一种方法可以让 v-for 循环在其中包含一个条件语句，这样我就可以减少程序中的冗余。如果 tagfitlers 对象不存在，我有一个 div 标签需要在 tag_filters 对象上循环，否则，我需要它在 tag_fitlers 对象上循环。

这是我当前循环的片段：

<div v-else class="text-left mt-2 border" v-for="(filter, index) in tagfilters" :key="index">
         <span v-for="(f, i) in filter" :key="i">
         <div class="d-flex justify-content-between align-items-center pr-3 pl-3 pt-3">
                  <!-- Multiselect Search with Tagging -->
                  <div>
                     <multiselect @change="onEdit(filter, 'code', f.code)" class="mb-2" v-model="f.code" placeholder="Search & Select Code Options" :custom-label="customCodesLabel" track-by="code" :options="codesArr"></multiselect>
                 </div>
         </div>
</div>

我希望做这样的事情：

v-for="tag_filters ? (filter, index) in tag_filters : (filter, index) in tagfilters"

这可能吗？

Answer 1

一种选择是使用 computed prop，但不确定它是否足以满足您的需要：

get realTagFilters() {
    return this.tagFilters ?? this.tag_filters;
}

你可以这样称呼它

<div v-for="(filter, index) in realTagFilters">

或者您可以尝试使用 logical or operator，它似乎也有效：

<div v-for="filter in (tag_filters || tagFilters)" :key="filter.id">

Answer 2

根据 Vue.js，

<块引用>

不建议同时使用 v-if 和 v-for。有关详细信息，请参阅样式指南。

https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

您可以使用计算属性来获取正确的列表。

new Vue({
  el: "#app",
  data: function() {
    return {
      tag_filters: {
        filterC: "tag_filter C.",
        filterD: "tag_filter D.",
      },
      tagfilters: {
        filterA: "tagfilter A.",
        filterB: "tagfilter B."
      }
    }
  },
  computed: {
    getTagFilters() {
      if (Object.keys(this.tag_filters).length === 0) {
        return this.tagfilters;
      } else {
        return this.tag_filters;
      }
    }
  }
})

<div id="app">
  <div v-for="(filter, key) of getTagFilters" :key="key">
    <span>{{ filter }}</span>
  </div>
  
  <button @click="tag_filters = {}">Remove tag_filter data</button>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

我可以创建一个条件 v-for 循环来在同一个 div 上循环吗？

2 个答案: