CODEWITHSUNDEEP
vue.jsbuttonclickvuetify.jsref
user4671351
user4671351

Reputation:

Trigger a button click from clicking another button in vuetify project?

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.

Upvotes: 1

Views: 6380

Answers (3)

Ntiyiso Rikhotso
Ntiyiso Rikhotso

Reputation: 720

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>

Upvotes: 3

Samuel Urias
Samuel Urias

Reputation: 92

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.

Upvotes: -2

Cathy Ha
Cathy Ha

Reputation: 1677

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.

Upvotes: 0

Related Questions