具有vue-tabs-component

Question

我正在尝试实现vue-tabs-component来将列表保存在我不太熟悉的代码库上。当前的实现只是在列表中显示所有条目（请注意，这不是完整列表）：

  <li v-if="(listType === 'all' || listType === 'sensory')">
    <ul class="effectList__subclasses">
      <!-- Auditory effects -->
      <li> <i class="fa fa-volume-up effectList__icon" /> <h2 class="effectList__childless">  Auditory Effects </h2>
        <ul class="effectList__actions">
          <action-list :effects="filterEffectByTag('auditory')" />
        </ul>
      </li>
      <!-- Tactile effects -->
      <li> <i class="fa fa-hand-paper-o effectList__icon" /> <h2 class="effectList__childless">  Tactile Effects </h2>
        <ul class="effectList__actions">
          <action-list :effects="filterEffectByTag('tactile')" />
        </ul>
      </li>
      <!-- Disconnective effects -->
      <li> <i class="fa fa-chain-broken effectList__icon" /> <h2 class="effectList__childless">  Disconnective Effects </h2>
        <ul class="effectList__actions">
          <action-list :effects="filterEffectByTag('disconnective')" />
        </ul>
      </li>
      <!-- Smell and taste effects -->
      <li> <i class="fa fa-cutlery effectList__icon" /> <h2>  Smell and Taste Effects </h2>
        <ul class="effectList__actions">
          <action-list
            :effects="filterEffectByTag('gustatory')"
            title="Gustatory effects" />
          <action-list
            :effects="filterEffectByTag('olfactory')"
            title="Olfactory effects" />
        </ul>
      </li>
    </ul>
  </li>

我们的出口：

export default {
  components: {
    actionList
  },
  props: {
    listType: {
      type: String,
      default: ""
    }
  },
  methods: {
    filterEffectByTag(...tags) {
      return this.$store.state.effects.filter(effect =>
        tags.every(tag => effect.tags.indexOf(tag) > -1)
      );
    }
  }
};

vue-tabs-component的实现（请注意，这只是选项卡来源的一部分）：

<tabs>
  <!-- Sensory -->
  <tab name="Sensory">
    <ul class="effectList__subclasses">
      <action-list
        :effects="filterEffectByTag('visual', 'enhancement')"
        title="Enhancements" />
      <action-list
        :effects="filterEffectByTag('visual', 'suppression')"
        title="Suppressions" />

      <action-list
        :effects="filterEffectByTag('visual', 'distortion')"
        title="Distortions" />
      <action-list
        :effects="filterEffectByTag('visual', 'geometry')"
        title="Geometry" />
      <action-list
        :effects="filterEffectByTag('visual', 'hallucinatory state')"
        title="Hallucinatory states" />
    </ul>
  </tab>
  <!-- Cognitive -->
  <tab name="Cognitive">
    <ul class="effectList__subclasses">
      <li>
        <action-list
          :effects="filterEffectByTag('cognitive', 'enhancement')"
          title="Enhancements" />
      </li>
      <li>
        <action-list
          :effects="filterEffectByTag('cognitive', 'suppression')"
          title="Suppressions" />
      </li>
      <li>
        <action-list
          :effects="filterEffectByTag('cognitive', 'alteration')"
          title="Alterations" />
      </li>
      <li>
        <action-list
          :effects="filterEffectByTag('cognitive', 'novel')"
          title="Novel states" />
      </li>
      <li>
        <action-list
          :effects="filterEffectByTag('cognitive', 'psychological state')"
          title="Psychological States" />
      </li>
      <li>
        <action-list
          :effects="filterEffectByTag('cognitive', 'transpersonal state')"
          title="Transpersonal states" />
      </li>
    </ul>
  </tab>
</tabs>

还有我们的出口：

export default {
  components: {
    Vue,
    Tabs,
    Tab,
    actionList
  },
  props: {
    listType: {
      type: String,
      default: ""
    }
  },
  methods: {
    filterEffectByTag(...tags) {
      return this.$store.state.effects.filter(effect =>
        tags.every(tag => effect.tags.indexOf(tag) > -1)
      );
    }
  }
};

这段代码的结果基本上就是我们想要的，但是其他选项卡之一最终却像this一样重复了

在首页加载时不会复制这些标签，但刷新后会复制一个或多个标签。我相信这是由于未使用条件<li v-if="(listType === 'all' || listType === 'class')">进行过滤，但是当我尝试使用该条件时，即使我使用与原始工作清单相同的条件，任何选项卡中都不会显示任何内容。

任何帮助深表感谢！