vue显示数据

请求发送、拿到数据在vue里如何显示

<template>
  <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"> </el-tree>
</template> 
<!--:data="menus" ，数据绑定、绑定data()的属性menus,用于显示数据
     props="defaultProps" 显示方式绑定  绑定的是defaultProps-->
<script>
export default {
  data() {
    return {
      menus: [],  //把请求获取到的数据放入    
      defaultProps: {  //设置显示方式 
        children: "children",  //children:"children" 设置那个字段是子菜单、 List<CategoryEntity>里 category的 children 属性 表示的是子菜单
        label: "name",    //拿菜单对象的哪个属性来显示
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    getMenus(){
        this.$http({     //获取请求的响应结果  此处返回的是List<CategoryEntity>对象
          url: this.$http.adornUrl('/product/category/list/tree'), //发送请求
          method: 'get'   //发送请求方式 
        }).then(({data})=>{ //{data}解构 data含有header、data等属性 只有data属性才是需要的数据
            console.log("成功获取到数据",data.data) //现实data数据
            this.menus=data.data;  //将拿到的data数据赋值给menus，然后由template绑定这个属性来显示
        }) 
    }
},
created(){
    this.getMenus();
}
  }


</script>

<style>
</style>