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

Question

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

Using v-if and v-for together is not recommended. See the style guide for further information.

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 吗？

Can I create a conditional v-for loop to loop on the same div?

vue.js

v-for