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.
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.
Related
working with https://github.com/matfish2/vue-tables-2 with Vue.js v2.6.11
Hello, a junior dev learning Vue.js (coming from React world). I'm trying change the filter/search box to fire on the click of a button I created, rather than after every keystroke (its default functionality). Eventually, I would also like to apply my own custom filters that are selected from a dropbox to apply when my search button is clicked.
I can't find the code where the search event is being triggered in order to redirect it to my button press. If anyone has any insight working with VueTables2 and could help point me in the right direction, it would be very much appreciated. Thanks!
There's a way to do this using ref and a function, documented here
https://matanya.gitbook.io/vue-tables-2/methods
#1. Add ref to table
<v-client-table :columns="columns" v-model="data" :options="options" ref="myTable">
#2. add method
methods: {
customFilter: function(){
this.$refs.myTable.setFilter('A')
}
#3. add method as event listener
<button #click="customFilter">Filter 'A'</button>
I am trying to create component which would extend v-btn in such a way that every time I click a button, it should emit short beep, and disable the button for 5 seconds.
It would be ideal for the button to change color while disabled.
This is a problem, since color is a property, and I can't overwrite it's value...
Also, when I try to invoke super.click(e), I get an error.
You can check example here: https://codesandbox.io/s/elegant-glade-pnhqx
Your Btn component should just "use" v-btn rather than extending it.
v-bind="$attrs" is to copy any <btn>'s attribute onto <v-btn>.
#click event is captured and reemited as-is after doing what needs to be done
See https://codesandbox.io/s/immutable-paper-w1wck?file=/src/components/Btn.vue:41-56
I am getting strange behaviour when trying to dynamically update the content of a slot in Vue with Vuetify. I'm sure this is just a function of misunderstanding how slots work.
I have a slot in a custom component, like so:
<template #selectButtons="slotProps">
<v-icon #click="dropToggle(slotProps.player)"
:color="dropColor(slotProps.player)"
class="mr-5"
>
fas fa-skull-crossbones
</v-icon>
</template>
When the user clicks on the icon, it is meant to toggle the icon to different colors.
I cannot seem to get dropColor to fire on each click consistently, HOWEVER, the weird part is, if I make some change inside the <v-icon> component, like say I just add {{dropColor(slotProps.player)}} inside the v-icon tags, then all of a sudden the code will work.
But then if I do a full refresh of the page, it stops working. Then I delete that code and put it back in, then it works again!
I have tried forceUpdate and keys on the v-icon tag.
Would appreciate any help
You are trying to pass function dropColor(slotProps.player) as props. The better idea is to replace function to an object or variable and change that object/variable within method dropToggle(slotProps.player) after #click event is firing .
I would like to extend the Datasearch component by a function that reacts on the event that the search icon is clicked. In https://github.com/appbaseio/reactivesearch/pull/747/files there is a handler for this, called handleSearchIconClick. However, it seems that this handler can't be overwritten. Is there another way to react in a meaningful way on this event? If yes, are there examples around that help to solve this problem? Thank's in advance!
Yes, you can have a custom click event with custom search icon, here is a sample which demonstrates that
https://codesandbox.io/s/datasearch-igd89
i want to have a route to a popup dialog.
I created a viewmodel with #noView
import {noView} from "aurelia-framework";
#noView()
export class MyViewModel{
...
}
but this leads to this error:
aurelia-logging-console.js:54 ERROR [app-router] TypeError: Cannot set property 'bindingContext' of null
In my opinion showing the popup from my navbar.ts is not suitable as i don't like to have such code in the navbar, i rather would have it on a place more suitable.
What is the best way to show a popup from navbar without losing the current content of the page so basically show it from anywhere and also with no code in navbar.ts at all.
Is there a better and nicer way to achive this?
Should i rethink my page layout?
Thanks.
I'd look up for event aggregator in this situation.
Where clicking a link or pressing a button will send an event and you can handle this event straight in the app.ts
So you will require your subscription behavior only in app and send an event to activate the popup from anywhere you want.
gl hf (-: