我怎么知道何时显示对话框答案

【问题标题】：How can I know when dialog is shown我怎么知道何时显示对话框
【发布时间】：2020-01-11 07:05:36
【问题描述】：

我正在使用 vue + Vuetify 制作电子应用程序。带对话框，可以做模态，但是要修改对话框中的某些div显示后。

使用$refs，在打开对话框之前找不到。我想在对话框打开时触发一些事件，例如绑定事件show.bs.modal 作为引导程序。有什么方法可以在对话框出现时触发？

我可以使用 $nextTick 更新，但这不是一个好的解决方案，也可以触发其他值已更新。

<v-dialog ref="alarmModal"> <-- okay
  <v-card-text ref="alarmModalPrices" style="height:300px"> <-- undefinded in methods or mounted
  </v-card>
</v-dialog>

<script>
export default {
mounted(){
  this.$refs.alarmModal.show = function () {  //<-- okay

   }
  this.$refs.alarmModalPrices.show = function () {  //<-- error

   }
},
updated () {
    this.$nextTick(function () {
      this.$refs.tempAlarmPrices.scrollTop = 50 // <-- okay, but also triggered when other values updated
    })
  }

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

我也使用 Eventbus 来触发事件。仍然不明白如何让事件触发并访问它的 DOM

<v-dialog ref="alarmModal" easer>
  <v-card-text ref="alarmModalPrices" style="height:300px">
  </v-card>
</v-dialog>
<script>
import { EventBus } from '../plugins/event-bus'
export default {
mounted(){
  this.$refs.alarmModal.show = function () {
    EventBus.$emit('fire') // <-- work
  }
}
updated(){
  this.$nextTick(function () {
      this.$refs.tempAlarmPrices.scrollTop = 300 // <-- work
      console.log(this.$refs.tempAlarmPrices.scrollTop) // return 300
      var root = this
      EventBus.$on('fire', function () { // <-- called when event fired
        root.$refs.tempAlarmPrices.scrollTop = 500 // <-- not work
        console.log(root.$refs.tempAlarmPrices.scrollTop) // return 0
      })
    })
}
}
</script>

【讨论】：