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
Related
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
is it possible to re-render all my vue components on a click function
i have read aboutvm.$forceUpdate() but it dose not effect all child components.
is there any other way?
thank you all
You probably not doing things in vue way if you need that kind of functionality, but quick hack which might help you to achieve what you want is to refresh whole page via javascript. So inside click function insert this:
location.reload()
the problem was my function was not working because i wrote it in mounted, and i had to reload or re-render my page to make that function work
after i change my function to updated the problem was solved
vue.js Lifecycle Hooks
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 this accordion working using just pure css with html: https://jsfiddle.net/11wunqqz/6/
but the problem is when I tried insert it in a aurelia code did not work.
reason? I am using href='#accordion' to make it work.
First Accordion
so when I click redirects me to the age localhost/#/accordion1
someone know best way to fix it? thank you
Try to add data-toggle="collapse" and data-parent to that anchor element. It will resolve your issue.
or else remove anchor tag and add replace with span element.
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.