是否有任何方法来渲染元素在两个不同的div使用一个v-for循环?

Question

目标是使输出看起来像这样:

<div id="tabs">
<div id="first">
<a>tab 1</a>
<a>tab 2</a>
</div>
<div id="second">
<a>tab 3</a>
</div>
</div>

目前我正在使用这个解决方案(使用两个v-for循环):

tabs.js(当前)

export default {
data() {
return {
tabs: {
first: [{ name: 'tab1' }, { name: 'tab2' }],
second: [{ name: 'tab3' }],
}
}
}
template: `
<div id="tabs">
<div id="first">
<a v-for="tab in tabs.first">{{ tab.name }}</a>
</div>
<div id="second">
<a v-for="tab in tabs.second">{{ tab.name }}</a>
</div>
</div>
`
}

我有一个类似这样的想法，但是它比两个循环执行更多的迭代:

tabs.js(想法)

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

我读了这个主题，但它包含稍微不同的解决方案，不幸的是在这种情况下不起作用。

Answer 1

使用多个v-for循环是没有问题的。使用嵌套的v-for循环也没有问题。

我看到的问题与您当前的代码是，它是不可扩展的。你的确切值硬编码标签在<template />(例句:firstsecond)。

这里的主要思想是遍历制表符，并且在每个制表符中，遍历每个内容，而不需要<template>知道制表符是什么或有多少。
这样当你把标签改成。

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

模板仍然可以工作，不需要任何更改。

---

要实现这种灵活性，您需要使用嵌套的v-for循环:

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

演示:

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>

---

但是我会更进一步，将tabs更改为数组:

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

和使用:id="'tab-' + name"制表符div如果你真的需要那些唯一的id。(提示:你不需要)。

这对我来说更有意义。

Answer 2

我没有看到使用两个v-for(一个用于对象键，另一个用于数组元素)有任何害处，因为它都是动态的。您可以使用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>

Answer 3

你可以添加一个计算属性作为.concat从两者和循环它

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