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 放在两者中，它只会运行循环两次。我试过this，但在我的情况下似乎不起作用。如果我这样做<template :name="tab.name">，组件会说它缺少必需的属性name。

这应该如何在 vue 中工作？

Answer 1

你可以使用v-for on a <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>

Answer 2

你可以试试这个

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