Is it possible in VueJS to have a default click event on a custom component?
E.g. we have built a component called editable. Now on click, we always want it to fire the same function, no matter where we call that component.
<editable #click="doSomething" ...></editable>
Can I define that somewhere in the JS side?
In case of custom component, you need to bind to native event:
<editable #click.native="doSomething" ...></editable>
For documentation, refer to Vue.js docs here.
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’m using Vue & Vuetify to create my app. With vuetify I’m using v-expansion-panels to create an accordion style display. Each v-expansion-panel itself contains a custom component.
I have noticed these components are not created until the expansion panel is clicked for the first time. After that, using keep-alive allows all reactive properties and methods of the child component to be active (this is my desired behavior).
How can I force the child components to be created when the parent is created? This, any method triggered in the created() lifecycle hook of a child component should fire when the parent is created.
This Codepen is an example of the current behavior. Note: be sure to look at the console when you click the panel.
If you think about it, it actually makes sense to lazy load content of expansion panels since it is useless work if the user never opens them anyway. So probably the thing you try to accomplish has some better approach, but if you still like it then my advice is to find a way of programatically opening / closing the panel (as seen here) and quickly open it and close it when rendering parent component. In this way, you will have your child component created and the UI will remain the same.
A Vuetify solution should be achievable by adding the eager prop to a v-expansion-panel-content element in the Expansion Panel. This should force any components or content contained within the v-expansion-panel-content element to render on mounted.
<v-expansion-panels v-model="panels">
<v-expansion-panel>
<v-expansion-panel-content eager>
<custom-component />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
I am attempting to access a child component's $refs inside a b-modal.
On page load, I can see with vue dev tools that "agent-edit" has not been created. If I put the component outside of b-modal, it does show and I can access it -- however I need this to load inside a modal. How can I access $refs.editAgent? Can I force this child component to load with the page?
<b-modal id="editModal" ref="editModal" title="Edit Agent" size="lg">
<agent-edit ref="editAgent"></agent-edit>
<div slot="modal-footer" class="w-100"></div>
</b-modal>
Refs are relative to the component they are created in (not the child components)
// use this
this.$refs.editAgent
// Not this
this.$refs.editModal.$refs.editAgent
Note that b-modal is lazy by default, meaning the content is not rendered (instantiated) in the document until the modal is shown.
Once the modal is finished opening, you should have access to the refs (they don't exist until they are rendered into the DOM)
Listen for the modal's shown event, and then access the refs once that event is emitted.
I guess, that there is no <agent-edit> inside <b-modal>, when you try to call the method.
When the modal is hidden, there is no need to render the child components. Try to first show the modal and then access its children (maybe even with a Vue.$nextTick to make sure everything is finished).
In your case, this.$refs.editModal.$refs.editAgent should work.
But pay attemption to the use of $refs and think about emitting events.
I din't get any docs for native event modifiers. I have seen some where like this:
<router-link #click.native="pressThis()"> Press here </router-link>
what is the use of native modifier on router-link click event.
and what other use case native modifier can have ?
You can override Vue events in custom components. For instance, you might have a list component that once you click an item you call this.$emit('click', selectedItemData), and that will emit the click event to the parent component that is watching that.
However, sometimes you really want to bind to the native HTML/DOM event listener element.addEventListener('click', callThisMethod), and that's the use of .native. Also, make a note that it will handle cleaning the event listener once your component gets destroyed just like a non-native event.
In sum: use .native when you need the 'raw' event from DOM.
I have a modal component with textarea which I use to edit data that's in my main instance. So the idea is when I open the modal component, the textarea should be showing current data value from the main instance, this can be done by passing data as prop to the modal component. But since it's prop, vue doesn't allow me to edit it in textarea. And if I use v-model for the textarea, how do I get the original data value the moment my modal popup?
Back in 1.x, I just need to add "two-way: true", but this approach depreciated in 2.0.
pass myProp object as a prop and on the text area you pass v-model="myProp.cellModel"