點燈坊

失くすものさえない今が強くなるチャンスよ

使用 nextTick() 在 v-for 內動態新增 Content

Sam Xiao's Avatar 2020-10-28

實務上較少在 v-for 內自行處理 DOM node，若真的需要則要使用 ref 與 $nextTick()。

Version

Vue 2.6.11

nextTick()

nexttick000

Price 使用 v-for 顯示，但 title 則由 ref 自行處理。

<template>
  <div>
    <button @click="onClick">Draw Table</button>
    <table>
      <tr v-for="(x, i) in books" :key="i">
        <td ref="title"/>
        <td>{{ x.price }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
let onClick = function() {
  this.$nextTick().then(() => {
    let text = document.createTextNode('hello')
    this.$refs.title[0].appendChild(text)
  })
}

export default {
  data: () => ({
    books: [
      { 'title': 'FP in JavaScript', price: 100 },
      { 'title': 'RxJS in Action', price: 200 },
      { 'title': 'Speaking JavaScript', price: 300 }
    ]
  }),
  methods: {
    onClick
  }
}
</script>

第 4 行

<table>
  <tr v-for="(x, i) in books" :key="i">
    <td ref="title"/>
    <td>{{ x.price }}</td>
  </tr>
</table>

使用 v-for 處理 <table>，但注意有一個 <td> 並沒有被 v-for 接管，而自行使用 ref 處理。

14 行

let onClick = function() {
  this.$nextTick().then(() => {
    let text = document.createTextNode('hello')
    this.$refs.title[0].appendChild(text)
  })
}

<table> 因為 v-for 已經 render 過，若要單獨處理 <td>，只能使用 ref，且必須搭配 $nextTick()。

因為 $nextTick() 回傳 Promise，所以須將 DOM API 寫在 then() 的 callback 內。

Conclusion

  • 當在 render 後改變 data 需顯示，且又沒有 data binding 時，就會需要使用 $nextTick()

# Vue