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

Question

I'm curious is there is a way to have a v-for loop with a conditional statement inside of it so I can reduce redundancies in my program. I have a div tag that needs to loop on the tagfitlers object if the tag_filters object does not exist, otherwise, I need it to loop on the tag_fitlers object.

This is a snippet of my current loop:

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

I am hoping to do something like this:

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

Is this possible?

Answer 1

According to Vue.js,

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

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

You could use a computed property to get the correct list.

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>