I have a v-checkbox-btn component from the new Vuetify 3 framevork:
<v-checkbox-btn color="grey-darken-2" class="my-0 py-0 ps-1" density="compact"
v-model="yesNo" :label="Yes / No"
#mouseover="cbMouseOver" #mouseout="cbMouseOut" />
My problem is, that when I hover over the label, the mouseover event isn't triggered. Only the checkbox triggers it.
I tried #mouseover and #mouseenter too - same behaviour. I haven't tried Vuetify version 2, just the new one.
How can I trigger the mouseover method for the label too?
I have a set of cards that are arranged vertically and are currently draggable. When you drag a card over another, you see this card as a semi-transparent card hovering over the target position, before you let go, the cards underneath swap positions.
I want to know how to trigger that behavior(swap positions/show animation of moving up/down) without dragging eg. click arrows up/down.
To clarify: "trigger event" as in not call the method that responds to the moving event(ending) but make the cards move as if a mouse/finger dragged the cards in a direction(up/down).
For now I have added a position switch that reorders the array but it does not trigger the visual aspect eg. dragging. You just see a flash and then cards are ordered differently.
See visual behavior
before move
during move
after move
Draggable component
<draggable v-model="things" :move="checkPosition" :options={animation:500}">
<div v-for="(thing, index) in things">
<div class="up" #clickSort"('up', index)">
<div class="down" #clickSort"('up', index)">
</div>
</draggable>
Relevant JS methods
watch: {
things: {
// this fires when you sort by dragging, as well as button click
// loop over things
// update vuex
}
}
checkPosition(event) {
if (event.related) {
// code that keeps draggable item pos in scope of existing elements
// some are hidden
return !event.related.classList.contains('locked');
}
}
clickDrag(direction, itemPos) {
// manual array sorting, no draggable event eg. hover/motion/transition
}
In order to create this transition effect, you must use Enter/Leave Transition provided by Vue https://v2.vuejs.org/v2/guide/transitions.html
You will need to define css animation styles that Vue will apply to your components when you want to trigger the animation, like ondrop event.
I have created input box of string type button with a button referencing that value passing to parent component but having issues.
Child Component
Parent Component
module.ts
I have this iterator that displays several components:
https://codepen.io/anon/pen/zRyGmq
The problem is, when I click the menu button on one of them, the value of menu v-model changes to true for all of them.
I couldn't figure out a way to scroll swiper when a button pressed inside a drawer.
To be exact: One component has a full screen swiper. When user clicks on hamburger button, drawer shows up with an array of swiper datasource items. I would like to navigate to clicked datasource item inside my component. Swiper already has a scrollBy function for this. I just need to know how can I possibly trigger my swiper to scroll x indexes.
I'm using Redux model in my application. I've tried to pass the reference of swiper via reducers but it just seemed wrong.