51535


ご覧いただきありがとうございます。  
vue.jsでv-forでli要素を生成します。

生成が終わったらこの要素を取得し、何かしらのイベントを発火させたいと考えてます。

[code]

    <ul class="list">
        <li
            v-for="i in item"
            :key="i.id">
            <p>
               テスト
            </p>
        </li>
    </ul>
    
[/code]

v-forで仕様している配列は、 vueのmethodsの部分で生成しています。

methodsの部分で配列を生成してからv−forで中身を生成しています。  
この生成したliをv-
forが終了したタイミングで取得し、イベント発火させたいのですが、配列を生成してから、v-forが回るのでvueのどのタイミングで取得したら良いか、方法が見つかりません。

知見がある方がいらっしゃれば、助けていただけるとありがたいです。  
分かりづらい文章で申し訳ないですが、よろしくお願いします。


CC BY-SA 4.0
2018-12-26T08:27:33.530
51532
2018-12-26T15:10:08.040
27046
question
vue.js
vue.jsのv-forで要素が生成されたタイミングを感知したい。


[`Vue.nextTick`](https://jp.vuejs.org/v2/api/index.html#Vue-nextTick) や
vm.$nextTick() を使うことで描画後(DOM変化後)のタイミングでイベントは飛ばせるかと思いますがいかがでしょうか。

[リアクティブの探求#非同期更新キュー](https://jp.vuejs.org/v2/guide/reactivity.html#%E9%9D%9E%E5%90%8C%E6%9C%9F%E6%9B%B4%E6%96%B0%E3%82%AD%E3%83%A5%E3%83%BC)

[code]

    new Vue({
      el: '#app',
      data: {
        item: [],
        count: 0
      },
      methods: {
        onClick() {
          this.item.push(this.count++)
          console.log('before', this.$el.innerHTML)
          this.$nextTick(() => console.log('after', this.$el.innerHTML))
        }
      },
    })
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
      <ul class="list">
        <li v-for="i in item" :key="i.id">
          <p>
            テスト {{i}}
          </p>
        </li>
      </ul>
      <button @click="onClick">Toggle</button>
    </div>
[/code]


CC BY-SA 4.0
2018-12-26T15:10:08.040
51535
2018-12-26T15:10:08.040
2376
51532
answer