如何在 Vue.js 中捕获模态 window 的 afterRender 事件

Question

我有一个模态 window 使用 Vuetify 库创建：

<v-dialog v-model="dialogFilters" max-width="1000px">
<template v-slot:activator="{ on }">
    <v-btn color="primary" dark class="mb-2 mr-2" v-on="on">Filters</v-btn>
</template>
<v-card>
    <v-card-title>
        <span class="headline">[[ formTitleFilters ]]</span>
    </v-card-title>

    <v-card-text>
        <div id="builder" class="container"></div>
        <v-container>
            <button class="btn btn-success" id="btn-set">Set Rules</button>
            <button class="btn btn-primary" id="btn-get">Get Rules</button>
            <button class="btn btn-warning" id="btn-reset">Reset</button>
            <div style="height: 10px"></div>
        </v-container>
    </v-card-text>

    <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" text @click="closeFilters">Cancel</v-btn>
        <v-btn color="blue darken-1" text @click="saveFilters">Save</v-btn>
    </v-card-actions>
</v-card>

此模式 window 包含 <div id="builder" class="container"></div>，它应该被另一个 JQuery 库（QueryBuilder）用来呈现某些元素。但是 Vue 在打开之前以某种方式隐藏了此模态 window 的内容，这就是为什么我的 div id="builder" 一直找不到的原因。我想在模式 window 打开时检索此 div。但我无法让它发挥作用。我无法弄清楚如何在呈现模态 window 时捕获该事件，我可以在其上使用 div 。将不胜感激任何帮助。 (https://jsfiddle.net/trnvp8qc/)

Answer 1

我在文档中找到了解决方案：https://vuejs.org/v2/guide/reactivity.html。

这个函数 "Vue.nextTick(callback)" 有帮助。

如何在 Vue.js 中捕获模态 window 的 afterRender 事件

How to catch the afterRender-event of modal window in Vue.js

javascript

jquery

modal-dialog

vue.js

vuetify.js