原生js通過最外層id獲取下面指定的子元素

需求：在vue中使用v-for循環出來的元素，設置動態id，之后獲取下面的所有textarea標簽

template:

<table cellpadding = 2 v-for="(item, index) in arrData" :key="index" cellspacing = 0 :id="'table' + index">
  <thead>
    <tr>
      <th>本周計划</th>
      <th>本周實際完成</th>
      <th>開累情況</th>
      <th>計划完成情況分析</th>
      <th>存在的問題</th>
      <th>下周計划</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <textarea type="text" readonly='readonly' v-model="item.curWeekly.curweekplan"></textarea>
      </td>
      <td>
        <textarea type="text" readonly='readonly' v-model="item.curWeekly.actual_final" ></textarea>
      </td>
      <td>
        <textarea type="text" readonly='readonly' v-model="item.curWeekly.condition" ></textarea>
      </td>
      <td>
        <textarea type="text" readonly='readonly' v-model="item.curWeekly.analysis" ></textarea>
      </td>
      <td>
        <textarea type="text" readonly='readonly' v-model="item.curWeekly.problem" ></textarea>
      </td>
      <td>
        <textarea type="text" readonly='readonly' v-model="item.curWeekly.nextplan" ></textarea>
      </td>
    </tr>
  </tbody>
</table>

methods:

// 設置高度
getHeight () {
  let arr = this.arrData
  for (let i in arr) {
    let tableId = 'table' + i
    let parent = document.getElementById(tableId) // 獲取父元素
    let textArea = parent.getElementsByTagName('textarea') // 獲取父元素下面的所有textarea元素
    // 對子元素的操作
    console.log(textArea)
  }
},

creat中：

async created () {
  await this.getData() // 先獲取數據，使用異步機制
  this.getHeight() // 獲取數據完了生成了節點之后才能獲取到元素
},