给循环div动态添加id并根据数据创建表格显示

<div
  v-for="(item, i) in msgList"
  :key="i"
  :class="item.role == 'user' ? 'rightMsg' : 'leftMsg'"
 >
<div class="table-container" />

js

      idArray: [],

        //过滤所有assistant的数据
        const count = this.msgList.filter(
          (item) => item.role === "assistant"
        ).length;
        for (let i = 1; i <= count; i++) {
          this.idArray.push(`item${i}`);
        }
        // 获取所有具有类名 'item' 的div元素
        const items = document.querySelectorAll(".table-container");
        // 遍历这些元素并设置ID
        items.forEach((item, index) => {
          item.id = this.idArray[index];
          // console.log(`Element text: ${item.textContent}, ID: ${item.id}`)
        });

        this.msgList.forEach((item) => {
          for (let i = 1; i <= this.idArray.length; i++) {
            if (item.table != "") {
              const id = this.idArray[i];
              // console.log('**********ADMET打印表格**************', id)
              // 获取容器元素，并将生成的表格添加到容器中
              const tableContainer = document.getElementById(id);
              // // 获取容器元素，并将生成的表格添加到容器中
              // const tableContainer = document.getElementById('table-container')
              tableContainer.appendChild(
                this.objectArrayToTable(JSON.parse(item.table))
              );
            }
          }
        });