【Vue.js】v-forの完了後のイベント定義

3143 ワード
foreach v-for Vue.js Vue.js テキストリンク

ポイント

DOMの更新後にイベントを実行する。

▶ 公式リファレンス：Vue.nextTick( [callback, context] )

nexttick.js

this.$nextTick(() => {
       //処理
});

例

v-for.vue

<template>
<!-- v-forでリスト作成 -->
<ul>
  <li v-for=" item in items">{{ item }}</li>
</ul>
</template>

<script>
export default {
  data() {
    return {
       items: []
    }
  },
  mounted() {
    for(let i = 0 ; i <= 5 ; i++) {
       this.items.push(i);
    }
    //--- ※v-for完了イベント
    this.$nextTick(() => {
       alert('done');
     });
  }
}
</script>