I'm currently building an electron app using vue and Vuetify. I am able to create a modal using dialog, but I want to be able to modify certain elements within the dialog after it is displayed.
When using $refs, I cannot find the element before the dialog is opened. I am looking for a way to trigger an event when the dialog is shown, similar to the binding event show.bs.modal in Bootstrap. Is there a method to do this?
I have tried using $nextTick within the updated hook, but it triggers whenever other values are updated as well, making it less than ideal.
<v-dialog ref="alarmModal"> <-- working fine
<v-card-text ref="alarmModalPrices" style="height:300px"> <-- undefined in methods or mounted
</v-card>
</v-dialog>
<script>
export default {
mounted(){
this.$refs.alarmModal.show = function () { //<-- works correctly
}
this.$refs.alarmModalPrices.show = function () { //<-- error
}
},
updated () {
this.$nextTick(function () {
this.$refs.tempAlarmPrices.scrollTop = 50 // <-- works, but also triggered by other updates
})
}