频道列表模块 (二) 02-渲染可选频道-可选频道 = 全部频道 - 我的频道 & Array.filter() 会遍历 返回符合条件的选项 组成一个新数组 & -1表示false，进入新数组

渲染可选频道-可选频道 = 全部频道 - 我的频道 & Array.filter() 会遍历 返回符合条件的选项 组成一个新数组 & -1表示false，进入新数组

• 获取所有频道API src/api/channel.js

/**
 * 获取全部频道
 */
export const getAllChannels = () => {
  return request('app/v1_0/channels', 'get')
}

src/views/home/components/channel-edit.vue中：

import {getA11Channels } from ‘@/api/channel’

• 调用API

methods: {
  async getAllChannels () {
    const data = await getAllChannels()
    //获取全部频道
    this.allChannels = data.channels
  }                    
}

  created () {
    this.getAllChannels()
  },

• 计算 可选频道

  computed: {
    // 可选频道
    optionalChannels () {
      // 可选频道 = 全部频道 - 我的频道
      // Array.filter() 会遍历 返回符合条件的选项 组成一个新数组
      return this.allChannels.filter(item => this.channels.findIndex(myItem => myItem.id === item.id) === -1)
    }
  },

• 渲染

		<div class="channel">
      <div class="tit">可选频道：</div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="item in optionalChannels" :key="item.id">
          <span class="f12">{{item.name}}</span>
          <van-icon name="plus" class="btn"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>