element折叠面板在打开的时候请求后端数据

<template>
<div>
  <p class="aaa"> ksjdfgbhkjsdf</p>

  <el-collapse v-model="activeName"
               @change="handleChange"
               accordion
  >
    <template v-for="item in items">
      <el-collapse-item
        :title="item.title"
        :name="item.id"
        :key="item.id">
        <div :id="item.id" added="0">

          <p :id="item.id+'ing'"> 正在努力加载数据中，请稍后</p>
        </div>
      </el-collapse-item>
    </template>

  </el-collapse>
</div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "",
      items:[
        {"title":"A","id":"123"},
        {"title":"B","id":"456"},
        {"title":"C","id":"789"}
      ],
      index:0
    };
  },
  methods: {
    handleChange(val) {
      if (val!=""){
        console.log("展开"+val)
        var area = document.getElementById(val);
        if (area.getAttribute("added")==="0"){
          //改变折叠面板的内容，通过added属性判断是否请求过后台，为0表示没请求过，则请求后台
          setTimeout(()=>{ // 此处定时用于模拟后台请求时，前端页面显示正在加载ing，请稍后
            document.getElementById(val+'ing').remove();
            var p = document.createElement("p");
            // p.setAttribute("class","aaa");
            p.className="aaa";
            //获取日期与时间，可以改成请求后台数据
            p.innerText=(++this.index)+":"+new Date().toLocaleString( );
            area.appendChild(p);
            area.setAttribute("added","1");
          },
          3000)
        }
      }else{
        console.log("折叠")
      }
    }
  }
}
</script>

<style>
/*这里不要用<style scoped>，不然找不到样式*/
.aaa{
  /*font-size: 25px;*/
  background: aqua;
}
</style>