渲染可选频道-可选频道 = 全部频道 - 我的频道 & 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>