0
<tabs :active="activedTabIndex" swipe-threshold="2">
  <tab v-for="(item, index) in items" :key="index">
    <div v-for=""></div>
  </tab>
</tabs>

data () {
  return {
    items: ['A', 'B'],
    values: [1, 2, 3, 4, 5, 6]
  }
},

computed () {
  computed1: function () {
    return this.values.filter(e => e > 3)
  },
  computed2: function () {
    return this.values.filter(e => e <= 3)
  }
}

在 items 的列表渲染中,我想做到 item-A 对应的是计算属性 computed1,item-B 对应的是计算属性 computed2,也就是说内容为 A 的 tab 中 <div v-for="item in computed1">,内容为 B 的 tab 中 <div v-for="item in computed2>,以此类推,请问该怎么实现这种需求

afishhhhh 395
2019-06-14 提问
3 个回答
0

已采纳

不必写那么多计算属性,可以直接通过一个计算属性整合出你需要的数据
template

<tab v-for="item in mItems" :key="item.key">
  <div v-for="item.children">...</div>
</tab>

script

computed: {
  mItems() {
    return this.items.map(key => ({
      key,
      children: this.values.filter(e => {
        switch (key) {
          case 'A':
            return e > 3;
          case 'B':
            return e <= 3;
        }
      }),
    }));
  },
},
0

这个需求为什么要用计算属性呢 不如直接循环values 然后用v-if来判断

0
<template>
...
  <tab v-for="item in items" :key="item">
    <div v-for="value in computedValues[ item ]" :key="value">
      ...
    </div>
  </tab>
...
</template>

<script>
...
  computed : {
    computedValues () {
      const { values = [] } = this;
      return {
        A: values.filter( item => 3 < item ),
        B: values.filter( item => 3 >= item ),
      };
    },
  },
...
</script>

撰写答案

推广链接