I'm stuck with a Flickity library error.
I have a carousel component which uses the Flickity to create the carousel. Everything was working fine until I needed to open this carousel inside a modal component.
When I trigger a button it opens the modal without the images from the carousel. If I resize the windows (enlarge or reduce the screen) Flickity starts to work. But I need flickity to work without the user having to move the screen.
<template>
<modal v-bind="$props">
<template v-slot:trigger>
<button>Open Modal</button>
</template>
<template>
<carousel :options="{wrapAround: true}">
<img src="https://via.placeholder.com/800x600" />
<img src="https://via.placeholder.com/800x600" />
<img src="https://via.placeholder.com/800x600" />
</carousel>
</template>
</modal>
</template>
<script lang="ts">
import { defineComponent } from '#vue/composition-api';
import Carousel from '../carousel/carousel.vue';
import Modal from '../modal/modal.vue';
import Button from '../button/button.vue';
export default defineComponent({
components: {
Carousel,
Modal,
Button,
},
setup() {
return {};
},
});
</script>
I noticed in another older post that one possible solution is: when I trigger the modal button I need to access the carousel component and make flickity do the resize method. I tried to do it but I have no ideia how can I call the method of the flickity when a trigger the modal button using Vue composition api.
Related
use Vue3-carousel
there is an object of 15 elements. how to make a carousel of 5 elements correctly?
I use this template
<template>
<Carousel :autoplay="2000" :wrap-around="true">
<Slide v-for="slide in 10" :key="slide">
<<div class="carousel__item">{{ slide }} here I want to output an object with 5 elements</div>
</Slide>
</Carousel>
</template>
<script>
import { define Component } from 'vue'
import { Carousel, Slide } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
export default define Component({
name: 'Autoplay',
components: {
Carousel,
Slide,
},
});
</script>
I've multiple (20+) pages where I need the following code:
<template>
<template v-if="isLoading">
<Spinner full size="medium" />
</template>
<template v-else>
<p>Page data</p>
</template>
</template>
<script>
export default {
computed: {
isLoading() {
return this.$store.getters['loader/isLoading'];
},
},
};
</script>
I don't want to rewrite this part everytime I need it so is there a way to create something like a higher order component with access to the computed method and a way to add the hoc to the script tag of the different vue files? Or another way to archive this?
I could recommend extending the spinner component where you want to show the spinner. I've created a boilerplate setup that show a very simple implementation of this approach here.
The main idea is to expose a default slot for you spinner component, and wrap the page component in that slot.
<template>
<div>
<Spinner v-if="isLoading" full size="medium" />
<!-- Slot for component data -->
<slot v-else></slot>
</div>
</template>
<script>
export default {
computed: {
isLoading() {
return this.$store.getters['loader/isLoading'];
},
},
};
</script>
Then in any component that you want to show the spinner:
<template>
<spinner>
<!-- Pass here the component content to be shown after the spinner is hidden -->
</spinner>
</template>
<script>
import Spinner from "./spinner";
export default {
name: "Page1",
extends: Spinner,
components: { Spinner }
};
</script>
I am creating simple app using Vue3, also I am using Swiprer.js for vue, documentation of swiper.js (for vue3) is incomprehensible to me, I have imported all modules in my application, but now i want to create vertical scrollable slider, like picture below, my swiper component looks like this:
but still can't create vertical scrollable slider, this what my template looks like, any solutions?
<template>
<div class="container-main-slider">
<div class="container-main-slider__inner" id="sliderBox">
<swiper
:slides-per-view="1"
:space-between="20"
:direction="vertical"
:pagination="{ clickable: true}"
>
<swiper-slide>
<img :src="dynamic content">
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
/* swiper slider imports */
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, { A11y, Autoplay, Pagination } from "swiper";
import "swiper/swiper.scss";
import "swiper/swiper.scss";
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([A11y, Autoplay,Pagination]);
export default {
data(){
return{
fixedheader:false,
}
},
components: {
Swiper,
SwiperSlide,
},
methods:{
showVideo(){
this.$store.commit("CheckvideoVisibility", false)
},
onSlideChange() {
console.log('slide change');
},
},
};
</script>
`
I have a solution
If someone faced the same problem: you just need to put 'vertical' in single quotes.
It will look like this in Vue template:
<swiper
:slides-per-view="1"
:space-between="0"
:direction="'vertical'"
>
I'm trying to dynamically show a footer/header based on a child view in ionic
I am using the Ionic 4 framework in combination with Vue.js. Tried slots and such having the feeling i'm on the right track but not fully there yet.
I've got a Base.vue (component) which holds
<template>
<ion-app>
<ion-page class="ion-page" main>
<page-header />
<router-view />
<page-footer />
</ion-page>
</ion-app>
</template>
<script>
import PageHeader from '#/components/PageHeader'
import PageFooter from '#/components/PageFooter'
import { mapState } from 'vuex'
export default {
name: 'master',
components: {
PageHeader,
PageFooter,
},
}
</script>
As a child view i've got the following; i know that it's not the right approach to include it inside the <ion-content> but don't know how to set this up in the correct way:
<template>
<ion-content fullscreen>
<page-header>
<ion-toolbar>
<ion-title>
Test
</ion-title>
</ion-toolbar>
</page-header>
<ion-content>
<p>Schedule page</p>
</ion-content>
</ion-content>
</template>
<script>
import PageHeader from '#/components/PageHeader'
export default {
name: 'schedule',
components: {
PageHeader,
},
}
</script>
The header component (which should be dynamic):
<template>
<ion-header>
<slot name="header" />
</ion-header>
</template>
<script>
export default {
name: 'page-header',
}
</script>
What i'm trying to do is making a Base.vue with a dynamic header (PageHeader.vue) so based on a given child view i could change or extend the header if needed.
So I think you're saying you want to change the content of the page header depending on the child.
Components cannot directly affect the templates of other components in the tree. Slots give you some control over this, but it is limited to allowing a component to inject templates into sections of a child component, not the other way around.
Your options are:
Add logic to your parent component which detects what child component is shown and then change the page header accordingly. The page header won't be controlled directly by the child component, though.
Use named views with vue-router.
Use something like portal-vue, but don't go crazy with this kind of power...
I am trying to launch a modal window, much like a normal alert()
I am using bootstrap-vue BModal
How to generate Modal class from code and launch it
or, add modal in the root app.vue and call it from child classes.
I found an example to but wasn't able to replicate that - https://codesandbox.io/embed/4l3w20zomw
I think you need to use show(), hide(), and toggle() component methods and here's Link, but the difference here you will call show() method to mounted() hook it will call showModal method in mounted cycle so when application is hosted you will see modal like alert, example
<template>
<div>
<b-modal ref="myModalRef" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h1>Any Content here</h1>
</div>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs.myModalRef.show()
},
hideModal() {
this.$refs.myModalRef.hide()
}
},
mounted() {
this.showModal();
}
}
</script>