Question

我正在使用vue + Vuetify开发电子应用程序。对话框，可以使其具有模式，但要在对话框显示后修改某些div。

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

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

<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
    })
  }

Answer 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>

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

1 个答案: