html vue 动态展示数据

vue axios 后台动态加载数据，表格循环展示，并绑定按钮，点击时触发对应事件从后台再读取数据再循环展示。
因为子表格也是动态生成的所以要注意为主表格动态绑定id，同时作为参数传入生成子表格的点击方法。

//主表格
<table class="table table-striped" id="tb">
  <tr>
    <td width="20">id</td>
    <td>名称</td>
    <td width="64">修改</td>
  </tr>
  <tr v-for="ehon in msg" :id="ehon.ehonid">
    <td @click="clickehon(ehon.ehonid)">{{ehon.ehonid}}</td>
    <td @click="clickehon(ehon.ehonid)">{{ehon.ehonname}}</td>
    <td><button type="button" class="btn btn-info">修改</button></td>
  </tr>
</table>

//子表格
<table class="table table-striped" id="subtb">
   <tr>
     <td>img</td>
     <td width="20">count</td>
     <td>name</td>
     <td>play</td>
   </tr>
   <tr v-for="subehon in submsg">
     <td>{{subehon.avatarPath}}</td>
     <td>{{subehon.classCount}}</td>
     <td>{{subehon.name}}</td>
     <td>{{subehon.filePath}}</td>
   </tr>
 </table>

//
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script> // 从后台取绘本
  var vue = new Vue({
    el: '#app',
    data: {
      msg: null,
      submsg: null
    },
    mounted: function () {
      this.getEhon()
    },
    methods: {
      getEhon: function () {
        var that = this;
        axios.get("https://kangqiaomingju.top/apis/books/getAllBooks")
          .then(function (response) {//返回类型为list<class>
            that.msg = response.data;
          }).catch(function (reason) {
            console.log("error");
          });
      },

      clickehon: function (eid) {
        var that = this;
        axios.get("https://kangqiaomingju.top/apis/books/getSubItemsByID",
          {
            params: {
              ehonid: eid
            }
          }
        )
          .then(function (response) {//返回类型为list<class>
            that.submsg = response.data;
          }).catch(function (reason) {
            console.log("error");
          });
      },
    }
  });
</script>