i am using swiperjs 7.4.1 with vue3
when i click on one of the slides, the slider keeps moving back to the beginning. Of course, I would like the slider to stay there when it is on a rear navigation.
I've tried everything. but I probably didn't get the right one
:no-swiping="true"
:swiper-no-swiping="space tile"
:no-swiping-selector="input"
<swiper class="swiper-container" ref="swiper"
:pagination="{ clickable: true }"
:modules="modules"
:slides-per-view="4"
:space-between="22"
:loop="false"
:allow-touch-move="true"
:no-swiping="true"
:swiper-no-swiping="raumkachel"
:no-swiping-selector="input"
#swiper="onSwiper"
#slideChange="onSlideChange"
>
<swiper-slide v-for="item, index in uicontent.rooms" :key="index" >
<div class="raumkachel" :class="index==route.params.roomId ? 'raumkachel-active':'raumkachel'" #click="contentRoom(index)" >
<p> {{ item.name }} </p>
</div>
</swiper-slide>
Related
I have a laravel component for a submit button in Tailwind.
The button code is:
<div class="{{ $position }} mt-4">
<button type="submit"
class="inline-flex items-center h-10 px-5 text-indigo-100 bg-indigo-600 rounded-lg focus:shadow-outline hover:bg-indigo-800" style="{{ addShadow() }}"
#if (!empty($onClick))
onclick="{{ $onClick }}"
#endif
>
#fas('{{ $icon }}')
<span class="ml-2">{{ $label }}</span>
</button>
The things like position, icon, label, onclick are passed in OK.
My problem is that unless the mouse is over the button it deos not really appear as can be seen from the image attach. The first shows as the page opens and the second is as the mouse is over.
I simply cannot get this to work!
I normally actually upload and test in an online area, but with the new Laravel Vite changes are not made. If this is done in localhost and then uploaded the app.css etc it works.
I'm trying to animate the list of cards when it gets re-rendered with a different values (i.e , Popular movies to Searched movies)
I followed the documentation of framer-motion and gave the parent div and the child div the Layout property yet nothing seems to change or happen.
If there's a different way of animating this I would love to hear
I've added the code here below :
the parent div :
<motion.div Layout className='movie-container'>
{movie.map((moviee) => (
<MoviePreview
moviee={moviee}
setFavorites={setFavorites}
favorites={favorites}
setTrailer={setTrailer}
setTrailerWindow={setTrailerWindow}
/>
))}
</motion.div>
the child div :
<motion.div Layout className='movie-card-container'>
<article className='movie-card'>
<h3>{moviee.title} </h3>
<div className='trailer-favorite'>
<button onClick={(e) => onHandleTrailer(moviee.id)} className='trailer-btn'>
Watch Trailer
</button>
<button onClick={() => addFavorite(moviee)} className='heart'>
💗
</button>
</div>
<img src={`https://image.tmdb.org/t/p/w500/${moviee.poster_path}`}></img>
<div className='movie-overview'>
<p>{!moviee.overview ? 'No description available.' : moviee.overview}</p>
</div>
</article>
</motion.div>
Thanks for any kind of help!
So currently I have this functionality where I have a Component that uploads images, and it takes up the full width.
But when I click it, the view becomes a grid-view with two columns, where my component now resizes to fill the first row, first column, while the images uploaded will take up the other spaces (so starting from first row, second column -- then second row, first column and so on.
So my problem is now that I want my images to be draggable, which is wrapped around in a draggable tag, but how can I do this but maintain it for just the images?
My code is as follows (I'm using tailwindCSS and Vue btw):
<div>
<draggable v-model="images" v-bind="dragOptions" draggable=".item">
<transition-group
:class="
images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
"
>
<ImageUploader
#addImage="addImage"
ref="deleteRef"
:key="'uploader'"
:shouldShowLabel="images.length != 0"
:class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
/>
<div
v-for="image in images"
:key="image.url"
#click="deleteImage(image)"
:class="'item'"
class="cursor-pointer p-2 shadow-lg rounded-md "
>
<figure class="image overflow-hidden relative cursor-pointer">
<img
:src="image.url"
:width="image.width"
:height="image.height"
alt=""
/>
</figure>
</div>
</transition-group>
</draggable>
</div>
I have some images to illustrate:
Before Upload:
After Upload:
So the thing is when I shift my images, my images array will have an undefined element, which I suspect to be from the ImageUploader component. Is there any way I can take it out so it is not draggable (so the images array will not be corrupted?). Right now I'm making my ImageUploader Component not draggable by using a different key, but yeah.
TLDR: I need my view to look like a grid with 2 columns, but i only want my elements after the first one to be wrapped in my vue draggable so they can be dragged except for the first element.
Much appreciated!!
I'm not really sure what you mean. But to my understanding you don't want your <ImageUploader/> component to be draggable?
Try moving it outside of the draggable component. :)
<div>
<ImageUploader
#addImage="addImage"
ref="deleteRef"
:key="'uploader'"
:shouldShowLabel="images.length != 0"
:class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
/>
<draggable v-model="images" v-bind="dragOptions" draggable=".item">
<transition-group
:class="
images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
"
>
<div
v-for="image in images"
:key="image.url"
#click="deleteImage(image)"
:class="'item'"
class="cursor-pointer p-2 shadow-lg rounded-md "
>
<figure class="image overflow-hidden relative cursor-pointer">
<img
:src="image.url"
:width="image.width"
:height="image.height"
alt=""
/>
</figure>
</div>
</transition-group>
</draggable>
</div>
I have a Vue application that shows content on the basis of the component type(Header, Text, Image) in my JSON file. I need to scroll spy on the Header component that has my headings.
I am using Bootstrap Vue Scrollspy ( https://bootstrap-vue.js.org/docs/directives/scrollspy/) and I have issues with the scrollspying, as in the highlighting of the menu item when the referenced item is reached. On inspecting my CSS, every time I scroll down to the second header, my second header in my sidebar becomes active(this is fine) but my first header still remains to stay active. Usually, the first header should turn back to normal. But in my case, all my headers are active in my sidebar when I reach the bottom of the page. Maybe it's because of dynamic data and because Vue sees them all as different components and it doesn't really know that the referenced item has passed already? I tried wrapping up my Header Component in a <div>, <section> but nothing seems to work. Would appreciate some help. Thanks!
This is what I have:
<template>
<div>
<div v-sticky class="sidebar_content">
<h5>Side Bar</h5>
<div
v-for="(item, index) in article.mainContent['en']"
id="side_bar_list"
:key="index"
>
<div v-if="item.component === 'heading'"> <--- Scrollspy menu on my sidebar
<b-list-group v-b-scrollspy>
<b-list-group-item
:href="`#header-${index}`"
>{{ item.settings.text }}</b-list-group-item
>
</b-list-group>
</div>
</div>
<div v-for="(item, index) in article.mainContent['en']" :key="index">
<image-component v-if="item.component === 'image'">{{
item.settings.image.path
}}</image-component>
<header-component <--- This is what I am scrollspying on
v-if="item.component === 'heading'"
:id="`header-${index}`"
>{{ item.settings.text }}</header-component>
<text-component
v-if="item.component === 'text'"
>{{ item.settings.text }}</text-component>
</div>
</div>
</template>
You need to move your v-b-scollspy directive to your sidebar wrapper element:
<div v-sticky class="sidebar_content" v-b-scrollspy>
<h5>Side Bar</h5>
<b-list-group id="side_bar_list">
<template v-for="(item, index) in article.mainContent['en']">
<b-list-group-item
v-if="item.component === 'heading'"
:key="index"
:href="`#header-${index}`"
>{{
item.settings.text
}}</b-list-group-item>
</template>
</b-list-group>
</div> <!-- end of side bar -->
<!-- main content divs -->
<div v-for="(item, index) in article.mainContent['en']" :key="index">
<image-component v-if="item.component === 'image'">{{
item.settings.image.path
}}</image-component>
<header-component
v-if="item.component === 'heading'"
:id="`header-${index}`"
>{{
item.settings.text
}}</header-component>
<text-component v-if="item.component === 'text'">{{
item.settings.text
}}</text-component>
</div>
I've made a menu showing systems and their subsystems (can in theory be indefinitely) using a recursive component. A user can both add and delete systems, and the menu should therefore update accordingly.
The menu is constructed using a "tree"-object. This tree is therefore updated when a new system is added, or one deleted. But, I now have a problem; even though the new child component is added when the tree is rerendered, the classes of it's parent-component doesn't update. It is necessary to update this because it defines the menu-element to having children/subsystems, and therefore showing them.
Therefore, when adding a new subsystem, this is presented to the user:
<div class="">
<a href="#/Admin/364" class="item">
<i class=""></i>Testname
<div class=""></div>
</a>
</div>
Instead of this:
<div class="menu transition visible" style="display: block !important;">
<a href="#/Admin/364" class="item">
<i class=""></i>Testname
<div class=""></div>
</a>
</div>
It works fine adding a subsystem to a system which already have subsystems (since the menu-class is already present), but not when a subsystem is added to one without subsystems. In that case, the menu ends up looking like this:
The "opposite" problem also occurs on deletion, since the parent still has the menu-class:
Here's the code for the recursive component:
<template>
<router-link :to="{ name: 'Admin', params: { systemId: id } }" class="item" >
<i :class="{ dropdown: hasChildren, icon: hasChildren }"></i>{{name}}
<div :class="{ menu: hasChildren }">
<systems-menu-sub-menu v-for="child in children" :children="child.children" :name="child.name" :id="child.id" :key="child.id"/>
</div>
</router-link>
</template>
<script type = "text/javascript" >
export default {
props: ['name', 'children', 'id'],
name: 'SystemsMenuSubMenu',
data () {
return {
hasChildren: (this.children.length > 0)
}
}
}
</script>
I'm guessing this has to do with Vue trying to be efficient, and therefore not rerendering everything. Is there therefore any way to force a rerender, or is there any other workaround?
EDIT: JSFiddle https://jsfiddle.net/f6s5qzba/