I have a <q-item> with clickable and #click event, wrapped inside <q-scroll-area>.
now when i tap on the <q-item> it just focuses (highlights) the item instead of calling the #click="() => {mymethod(args)}" method.
This is happening in iPad only.
Related
I'm trying to implement generic modal component with Vue 3.
And I want to close modal window on click outside the modal's content.
So I added 'close' event on modalWrapper and 'contentClick' to prevent closing (bubbling) when content is clicked:
contentClick(event:Event){
event.stopPropagation();
}
Modal:
<template>
<teleport to="body">
<div class="modal-window" v-on:click="close" v-show="isOpened">
<slot class="modal-window__content" v-on:click="contentClick($event)"></slot>
</div>
</teleport>
</template>
The problem is that contentClick(event:Event) is not fired for some reason. I can wrap slot into another div and put contentClick event on it, but not sure that it's a good solution
I think I've stumbled over something really strange. I have a Menu component which has two ways of managing visibility of a dropdown div:
Internally using local state;
Using v-model to keep track on the parent component.
I also have a child component called MenuItem. This MenuItem (one or more) is to be passed into the Menu default slot. The MenuItem has a slot of its own, for an icon.
The Menu also has a slot for the "activator", an element which toggles the menu visibility. This can be a regular slot, or a scoped slot.
If the visibility of the menu is handled through the scoped slot:
<Menu>
<template v-slot:activator="{ on }">
<button v-on="on" type="button">Click me</button>
</template>
</Menu>
Then the icon for MenuItem will render the first time the menu is visible, but subsequent changes to visibility won't render the icon. The icon slot is optional, so I am checking for it's presences using this.$slots['icon-left'], and after the first render this is undefined.
However, if I manage the visibility on the parent component using v-model, this behaviour is not present.
<Menu v-model="isMenuVisible">
<template v-slot:activator>
<button #click="isMenuVisible = !isMenuVisible" type="button">Click me</button>
</template>
</Menu>
I am using v-if for toggling the visibility of the dropdown menu. This behaviour is not present if I use v-show. This behaviour is also not present if I do not check for the existence of this.$slots['icon-left'].
I have a full demo of the issue.
Basically I am very confused as to why this is happening, and I don't even know what to Google.
When im opening the modal, it transition without problems, but when hiding the modal, it doesnt transition out again - It just disappears.
I have the inside the modal (Worked in Vue2), but that seems to be a problem... If I move the component outside to the parent component and wrap the component in the transition it works, but it seems like it's not possible to have the component inside the component? Any ideas ?
See a Codesandbox here: https://codesandbox.io/s/ancient-cookies-rdm3w?file=/src/components/Modal.vue
Move the transition tag into the parent, wrapping the component. If you wrap the transition on the modal / child component itself, the component will be unmounted when you click the close modal button, and the animation won't have time to run.
<transition name="modal" :appear="true">
<Modal v-if="showModal" #close-modal="showModal = false" />
</transition>
Just want to prevent one of my buefy button to be focused when i click on it :
Code of the button :
<b-button class="button-rounded" type="is-success" icon-right="film" rounded />
Not focused :
Focused :
In my use case other design i add on the button are getting cleared by the focus, i want to prevent any focus when clicking on the button. I'm using VueJS 2 with Buefy (Bulma)
Any idea ?
thanks in advance
Does
<b-button tabindex="-1" class="button-rounded" type="is-success" icon-right="film" rounded />
do the trick?
Is it possible to prevent the function on the <div> element from running when clicking the button inside the div?
When clicking the button element, the function: toggleSystemDetails should not be triggered? Is this possible in Vue?
<div v-on:click="toggleSystemDetails($event, system.id)" v-for="(system, index) in organization.systems" :key="system.id">
Outer Div
<button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
Inner Button
</button>
</div>
Have a look at Event Modifiers in the Vue.js v3 docs (v2 docs here), v-on:click.stop will stop that click from propagating or "bubbling" up to the parent element.
Here is how to master this problem.
Say you have a parent element and some child elements.
1.(1st case) You want the parent click to do not affect the child clicks. Just put at the parent element the .self modifier:
<div class="parent" #click.self="parent"> <!-- .self modifier -->
<span class="child" #click="child1">Child1</span>
<span class="child" #click="child2">Child2</span>
<span class="child" #click="child3">Child3</span>
</div>
See it in action here
note: if you remove the .self when you click a child, the parent event will fire too.
2.(2nd case) You have the below code:
<div #click="parent">
Click to activate
<i class="fa fa-trash" title="delete this" #click="delete_clicked"></i>
</div>
The problem is:
When you click the icon element the parent click will fire. (you don't want this)
You can NOT use the 1st solution because you want to fire the parent event even if the text "Click to activate" gets clicked.
The solution to this is to put the .stop modifier to the icon element so the parent event will not fire.
See it in action here
as mentioned on the link provided by Justin
you can .self in the click event
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
I just want to put my two cents here, since I do find myself looking for this problem again and again (one day I will remember).
I have found in some instances, the child element needs #click.stop.prevent and that's it, to stop it from bubbling to the parent.
I assume v-on:click.stop.prevent would have the same effect (non-shorthand).
additionally, if a child element detains you from clicking the parent element, you can fix this by adding CSS to the child element pointer-events: none.
this solution is valid if there is no event in the child element.
You can use #click.stop on child component, for examaple
.modal(#click="myfunc")
default-content(#click.stop)