内容管理（五） 02-频道选项-下拉列表数据 await拿取渲染

06-内容管理-频道选项渲染

• 组件初始化完毕
  • 获取后台的数据
  • 给channelOptions赋值

// 频道选项数据
channelOptions: [],

  created () {
    // 获取频道选项数据
    this.getChannelOptions()
  },

methods: {
    //解构赋值
// 得到 用户 信息  res.data.data  res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}

  // 函数的返回值  加载await之后  是then接受的数据
  // 在使用await之后在 外层函数必须用async 来申明

//拿数据和赋值
  async getChannelOptions () {
      const { data: { data } } = await this.$http.get('channels')
      this.channelOptions = data.channels
    }
  }

结构：

//遍历频道的下拉列表数据，进行渲染到页面
<el-option
              v-for="item in channelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>