vue.js：循环+组件+if/else？

Question

我有以下内容

<tabs>
    //If tab.name is not null
    <tab v-for="tab in tabs" :key="tab.id" :name="tab.name" :suffix="tab.id">
    </tab>
    //If tab.name is null
    <tab v-for="tab in tabs" :key="tab.id" :name="tab.id">
    </tab>
</tabs>

我想为我的数据运行一个循环，并根据我的条件以不同的方式呈现组件。

我一辈子都不知道该怎么做。v-else需要另一个元素声明，但如果您将v-for两者都放入，它只会运行循环两次。我尝试过这个，但它似乎不适用于我的情况。如果我这样做，<template :name="tab.name">组件会说它缺少所需的属性name。

这在 vue 中应该如何工作？

Answer 1

v-for您可以在元素上<template>使用并v-if在内部使用：

<tabs>
    <template v-for="tab in tabs">
        <!-- //If tab.name is not null -->
        <tab v-if="tab.name" :key="tab.id" :name="tab.name" :suffix="tab.id">
        </tab>
        <!-- //If tab.name is null -->
        <tab v-else          :key="tab.id" :name="tab.id">
        </tab>
    </template>
</tabs>

演示：

Vue.component('tab', {
  props: ['name', 'suffix'],
  template: `<div>tab - name: {{ name }} - suffix: {{ suffix || 'not available' }}</div>`
});
Vue.component('tabs', {
  props: ['tabs'],
  template: `<div>tabs<hr><slot :tabs="tabs"></slot></div>`
});
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    tabs: [{id: 1, name: "Alice"}, {id: 2}]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <tabs :tabs="tabs">
    <template v-for="tab in tabs">
      <!-- //If tab.name is not null -->
      <tab v-if="tab.name" :key="tab.id" :name="tab.name" :suffix="tab.id"></tab>
      <!-- //If tab.name is null -->
      <tab v-else          :key="tab.id" :name="tab.id"></tab>
    </template>
  </tabs>
</div>