vuejs 中不存在引用

Question

I want to trigger a button click programmatically in vuejs with a javascript method and I have the following line to reference it via the ref tag. below is my javascript

this.$refs.action.click();

Below is the html for the button

<button v-show="false" ref="action" type="button" data-toggle="modal" data-target="#MonitorModal" />

Is there a reason this isn't working? I believe it's all declared fine and when I run a console.log on this.$refs I see the action as anfield, but when I try to reference it, I get undefined

Answer 1

the elements are only available after the initial mount of the component if you are using vue 2 try running your code on mounted life cycle hook.

mounted() {
  this.$refs.action.click();
}

in vue 3 use onMounted life cycle hook.

const action = ref()

onMounted(()=>{
action.value.click()
}