не получается выбрать ячейки таблицы td по querySelectorAll

Question

Нужно заполнить ячейки таблицы. И чтобы получить все ячейки для заполнения я использовала queryselectorall. Но массив выходит пустой.

   <table>
      <tbody :id="`table-${id}`">
        <tr v-for="(row, index) in table[0]"
            :key="index + 'key'"
            class="rows">
          <td v-for="(cell, index) in table[1]" class="cell"
            :key="index" >
          </td>
        </tr>
      </tbody>

clicked () {
  const tableWrapper = document.querySelector('#table-' + this.id)
  const tds = tableWrapper.querySelectorAll('td')
  console.log('td', tableWrapper, tds)
  tds.forEach(td => {
    console.log('tds', td)
  })
}

Answer 1

Вы можете использовать refs. С помощью его можно получить dom элемент. Но часто его использовать не рекомендую

можете почитать про него тут

new Vue({
  el: '#app',
  mounted() {
    this.$refs.input.focus()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input ref="input">
</div>

В данном примере при загрузке страницы с помощью refs устанавливается focus

БЛОГ НА HUSL

не получается выбрать ячейки таблицы td по querySelectorAll

Ответы (1 шт):