I am getting problem in accessing the control inside a component. The scenario is I have a datagrid in which I have a component in which I have a textarea. Now by selecting a menu option I need to focus the textarea.
Pls help me in referring the textarea. I need to setfocus in that textarea.
Thanks in advance.
You can say
myDataGrid.editedItemPosition = {rowIndex:4, columnIndex:1};
myDataGrid.editedItemRenderer.myTextArea.text = "blah";
That will probably only work if your component is set as the itemEditor and not the itemRenderer.
Related
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 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 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.
I have a v-autocomplete where users be able to search, and I would like to keep the one that's in the v-autocomplete component if there are no matching results. But normal behaviour for a v-autocomplete is to remove what's on the component if there is no matching result.
I have created a method named testBlur() which I call on the blur event for the v-autocomplete component.
Is anybody be able to help me with this?
codepen: https://codepen.io/pen/gBWEVB
Thank you.
Combo box solved this issue.
As Gil mentioned you could use a Combo box with Advanced custom options. https://vuetifyjs.com/en/components/combobox
Hi i have a problem about triggering component b-form-file.
<b-form-file ref="imageProfile"></b-form-file>
I try with this.$refs.imageProfile.click() not work. And i see not found click function on that element.
Thank You.
The file form component of bootstrap-vue is a little different, for someone still get this problem, try this:
<b-form-file ref="pickImage" v-model="file" :state="Boolean(file)"></b-form-file>
this.$refs.pickImage.$el.childNodes[0].click();
hope this help !
You need to trigger the click on the element, not the component.
Try this:
this.$refs.imageProfile.$el.click()
See Vue Docs at https://v2.vuejs.org/v2/api/#vm-el