[Vuejs]-Vue.js – Is there any way to render elements in two different divs using one v-for loop?

by

2👍

✅

There’s no problem using more than one v-for loops. And there’s no problem using nested v-for loops.

The problem I see with your current code is that it’s not scalable. You’re hard-coding the exact values of your tabs in <template />(e.g: first, second).

The main idea here is to loop through tabs and, inside each tab, to loop through each contents, without the <template> needing to know what the tab is or how many there are.
So that when you change your tabs to, say…

{
   tab1: [{ name: 'intro'}],
   tab2: [{ name: 'tab2-1' }, { name: 'tab2-2' }],
   tab3: [{ name: 'tab3' }]
}

template still works, without needing any change.

To achieve this type of flexibility, you need to use a nested v-for loop:

<div id="tabs">
  <div v-for="(items, name) in tabs" :key="name" :id="name">
    <a v-for="(item, key) in items" :key="key" v-text="item.name"></a>
  </div>
</div>

Demo:

new Vue({
  el: '#app',
  data: () => ({
    tabs: {
      tab1: [{
        name: 'intro'
      }],
      tab2: [{
        name: 'tab2-1'
      }, {
        name: 'tab2-2'
      }],
      tab3: [{
        name: 'tab3'
      }]
    }
  })
})
#tabs a { padding: 3px 7px }
<script src="https://v2.vuejs.org/js/vue.min.js"></script>
<div id="app">
  <div id="tabs">
    <div v-for="(links, name) in tabs" :key="name" :id="name">
      <a v-for="(link, key) in links"
         :key="key"
         :href="`#${link.name}`"
         v-text="link.name"></a>
    </div>
  </div>
</div>

But I’d take it one step further and change the tabs to be an array:

data: () => ({
  tabs: [
    [{ name: 'intro'}],
    [{ name: 'tab1' }, { name: 'tab2' }],
    [{ name: 'tab3' }]
  ]
})

And use :id="'tab-' + name" on tab divs if you really need those unique ids. (Hint: you don’t).

It makes more sense to me.

👤tao

2👍

I did not see any harm in using two v-for (one for the object keys and another for the array elements) as far as it is all dynamic. You can give a try to this solution by using of Object.keys() :

new Vue({
  el: '#app',
  data: {
    tabs: {
      first: [{ name: 'tab1' }, { name: 'tab2' }],
      second: [{ name: 'tab3' }],
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="tabs">
    <div v-for="tab in Object.keys(tabs)" :key="tab" :id="tab">
      <a v-for="tab in tabs[tab]">{{ tab.name }}</a>
    </div>
  </div>
</div>
👤Debug Diva

0👍

You could add a computed property being the .concat from both and loop for it

export default {
    data() {
        tabs: {
            first: [{ name: 'tab1' }, { name: 'tab2' }],
            second: [{ name: 'tab3' }],
        }
    },
    computed: {
       tabsCombined () {
          return this.tabs.first.concat(this.tabs.second)
       }
    },
    template: `
        <div id="tabs">
            <div v-for='category in tabsCombined' :id='category' :key='category'>
                <template v-for="tab in tabs.test">
                    <a v-if='tab.category === category>{{ tab.name }}</a>
                </template>
            </div>
        </div>
    `
}
👤Toni Michel Caubet

Leave a comment