I need clicking on one button to activate a click function on a different button. I expected to be able to use a ref prop on the button to achieve this but instead I get a 'Cannot read property '$refs' of null' console error.
<v-btn ref="modalButton" @click="modal">Open Modal</v-btn>
<v-btn @click="this.$refs.modalButton.click()">Click other button</v-btn>
Apparently this is because the component isn't created yet but I'm truly confused about what that means and how to solve the problem.
Please note the click has no '()'
<v-btn ref="modalButton" @click="modal">Open Modal</v-btn>
<v-btn @click="$refs.modalButton.$el.click">Click other button</v-btn>
Put "this.$refs.modalButton.click()" into a function - you can't refer to the modalButton that way in the HTML.
Although, if the visibility of your modal is tied to a data property, I don't know why you can't just change the data property directly with both buttons.
this keyword and make sure the component is already mounted.If you want to do something when another thing happens, try to use something called event bus. I solve a lot of problems implementing that.
Here is an example: https://alligator.io/vuejs/global-event-bus/
Btw: If your problem is that the other component has not been created at the render moment, you can solve it calling a function on the @click event, then when you click it, you are going to call the function that is going to be called when everything in the DOM has been rendered. At least that is the way that I solve that kind of problems.
@click="() => { this.$refs.modalButton.$emit('click') }"