Question

我在Vuetify中有一个对话框，需要一些API调用来填充视图。我想在加载主屏幕（onMounted时不运行那些重量级的API调用，而仅在首次显示该对话框时运行（理想情况下，在对话框显示时关闭我的API侦听器）已关闭）。但是我找不到任何办法。我查看了v-intersect，但它看起来很复杂且容易出错，在IE上不可用。显示对话框时，Vue或Vuetify是否触发了任何事件，或设置了响应值？

如果有帮助，我正在使用Vue 2和composition-api。

这是RenderDialog组件的简短版本（仅是脚本部分）：

export default defineComponent({
  name: 'RenderDialog',
  setup(props, context) {
    const state = reactive({
      dialogValue: 0,
      expensiveComputationResult: 0,
    })

    watchEffect(async () => {
      state.expensiveComputationResult = await doExpensiveComputation(state.dialogValue)
    })

    return {state}
  }
})

这是从父级调用的方式：

          <render-dialog>
            <template v-slot:activator="{ on }">
              <v-btn v-on="on">Open Dialog</v-btn>
            </template>
          </render-dialog>

现在，每次页面加载时，它都会调用doExpensiveComputation。我想推迟到用户打开对话框。

仅在显示对话框时，如何在Vuetify对话框中运行API调用？

0 个答案: