Hi all: I have a modal that I would like the buttons to be passed through slots, each with its own events. The problem is that when I click on the button, the event fires but the parent can't hear it.
<template>
<modal-detail v-if="viewModal" title="Modifica brands" #close="viewModal=false">
<!-- <template #header><p>ciao bob</p></template> -->
<template #body>
sdfgsfgddd
</template>
<template #actions>
<button-cancel buttonText="cancella" #click="$emit('close')"></button-cancel>
<button-confirm buttonText="conferma" #click="$emit('confirm')"></button-confirm>
</template>
</modal-detail>
</template>
The problem is thath #close="something" is never called.
Suggestion?
Thanks, all
It seems like you're using a custom component button. You either need to bind the #click handler to prop callback or use #click.native to apply the click handler.
To help debugging events and other issues such as with Vuex in the future, you can use the Vue browser dev tools.
If you install that plugin, and check the events stream you can see what events are being emitted by what. For example, if you haven't correctly set up your click handler with your custom button then you won't see the event getting emitted.
Related
I'm using vue-tippy 6.0.0-alpha.63 for vue3.
I have a single component on the page which has a dynamic content and want to make a tooltip from it. This tooltip should be shown when user moves mouse over one of many buttons with class skill_tab. Those buttons are nested deeply inside the parent component of the current component.
I wrapped the component content with a <tippy> component and I'm trying to bind the tooltip to the buttons using to prop but it doesn't work.
I also tried using the triggerTarget prop providing the class .skill_tab as the value, but it looks like triggerTarget only works with refs.
Component for a button:
SkillTab.Vue
<div class="skill_tab">
...
</div>
Component for the tooltip:
SkillTooltip.Vue
<tippy followCursor=true to=".skill_tab" allowHtml=true placement="bottom-end" interactive=true>
<div id="skill_tooltip" class="skill_tooltip" :class="{active}" v-if="active">
...
</div>
</tippy>
Is there any way to bind the tooltip to all the buttons without passing refs via a global state or any other simple way?
I have two children components (CModal1 and CModal2) inside a parent component and both of them are wrapper in the ModalWrapper component. This wrapper component gives each modal a transition effect and a close event (an X button and a background that both emit the close event).
Right now, if the outter most layer's (Modal2) close buttons are clicked, it also closes Modal1. Is this because both #close events fire?
How can I remedy this? Should I put the wrapper of Modal2 inside the actual component, rather than wrapping it in the parent?
If I haven't explained things correctly, or you need more code/context, please let me know.
Cheers!
ParentComponent
<template>
<ModalWrapper
#close="modal1Open = false"
:isVisible="modal1IsVisible"
>
<CModal1
v-if="modal1IsVisible"
:formData="formData"
#close="modal1IsVisible = false"
#save-data="(val) => saveData(val)"
#open-modal-2-clicked="modal2Open = true"
/>
</ModalWrapper>
<ModalWrapper
#close="modal2Open = false"
:isVisible="modal2Open"
class="z-30"
>
<CModal2
v-if="modal2IsVisible"
#close="modal2IsVisible = false"
/>
</ModalWrapper>
</template>
Is it possible to disable this blur call on the active element from SwiperJS in the onTouchStart event handler?
Some background:
For touch and desktop devices I'm using swiper for forms on swiper-slides. Within a form I'm using vue-select (a combobox).
The Problem: When the user selects an entry, the entry get not selected on the first time but on the second time.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>First form</div>
<v-select :options="selectionEntries"></v-select>
</div>
<div class="swiper-slide">
<div>Second form</div>
<v-select :options="selectionEntries"></v-select>
</div>
</div>
</div>
See also this example on codepen
I figured out that it seems to work correctly:
When I remove the blur-listener on the input field of the vue-select box. But it is used to close the selection list when the user leaves the field.
When I comment out this blur call in SwiperJS. I'm not sure why it is used there.
The first point is not an option, so is it possible to disable the blur call of SwiperJS via configuration?
Currently I'm using this workaround (SwiperJS V6.4.1):
const swiper = new Swiper(".swiper-container", {
// Workaround part 1:
touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'
Part 1: To handle mouse down and click events on all elements, set the swiper parameter touchStartPreventDefault: false.
That will disable this code block: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97
Part 2: Set swiper.touchEventsData.formElements = 'undefined' to define nothing as formElements. That will disable the code block that calls blur: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88
Is it possible, when button triggers this action, it stays on !this.lastMeasure? Because when I click it again, it goes back to the last state. I want it to stay on the new state.
changeMeasure() {
this.lastMeasure = !this.lastMeasure
}
Vue provides event modifiers for the v-on directive. One of these event modifiers is .once, it rules the associated events to be triggered at most once.
You can use this event modifier like :
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>
Then in your case, you may use something like :
<!-- '#' is the shorthand for 'v-on:' -->
<button #click.once="changeMeasure">I am the button</button>
source
In the vue docs under Event Modifiers, there's an example of a modifier called capture which states the following:
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
I've done some searching, but haven't found a clear answer as to how this modifies the event binding, then I thought to myself 'You know who always has the answer? Stack Overflow'
So right after posting I stumbled on this article which illustrates it clearly. Let's say for this example that you have three elements nested within each other:
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
When a click event occurs, there are two phases: the first is called capturing, the second is called bubbling. When you click on the .inner, the event traverses down from the outermost container element .outer, to .middle, then to .inner in the capturing phase, then from .inner to .middle, then to .outer in the bubbling phase.
If capture is set on .inner for a click event handler:
<div class="outer">
<div class="middle">
<div class="inner" v-on:click.capture="doThis"></div>
</div>
</div>
and you click on it, it will hit .outer, then .middle, then .inner in the capture phase, which will cause doThis(...) to be called, after which the bubbling phase begins.
If capture is set on .middle for a click event handler
<div class="outer">
<div class="middle" v-on:click.capture="doThis">
<div class="inner"></div>
</div>
</div>
and you click on it, it will hit .outer, then .middle, in the capture phase, which will cause doThis(...) to be called, then hit .inner in the capture phase, after which the bubbling phase begins.
Edit: Thanks for all the great responses below, I've amended the answer to fix where I was incorrect.
Both bubble and capture event handlers on an element will be triggered only once, the difference is when they are triggered (before the children or after the children). Capture mode means the handler is triggered before any handlers on child elements. Bubble mode (the default), means the handler is triggered after all child elements have finished their handlers. You can even put a capture mode and bubble mode event handler by doing <div v-on:click="doThis" v-on:click.capture="doThis">
This JS fiddle demonstrates how a single click to a nested inner element first triggers capture handlers in an "outer-to-inner" order, and then triggers bubble handlers in an "inner-to-outer" order.