vue-splide

vue-splide copied to clipboard

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.12

Description

<Splide
    :options="options"
    class="row text-center justify-content-center"
    @splide:destroy="onDestroy"
    @splide:mounted="onMounted"
>
    <SplideSlide class="col-md-6 col-xl-4 mb-md-32" v-for="(item,index) in cms.list">
        <div class="mx-w335 mx-auto">
            <div class="numbers mb-16">{{ +index + 1 }}</div>
            <h5 class="mb-10" v-html="item.title"/>
            <div class="p3" v-html="item.description"/>
        </div>
    </SplideSlide>
</Splider>

<script>
export default {
    data() {
        return {
            options: {
                breakpoints: {
                    10000: {
                        destroy: true
                    },
                    767: {
                        destroy: false
                    }
                }
            }
        }
    },
     methods: {
            onMounted(){
                console.log("mounted");
            },
            onDestroy(){
                console.log("destroyed!");
            }
      },
....
}
</script>

Reproduction Link

No response

Steps to Reproduce

1. add options with breakpoints and destroy
2. assign destroy method
3. Launch and try to resize and trigger destroy multiple times

Expected Behaviour

keep methods that assigned through vue (onMounted, onDestroy etc)

Also one more request probably off topic. But I'll ask here. It would be nice to have on destroy remove splide html structure. For example in my code above I would expect on destroy to render html:

<div class="row text-center justify-content-center">
    <div class="col-md-6 col-xl-4 mb-md-32">
        <div class="mx-w335 mx-auto">
            <div class="numbers mb-16">1</div>
            <h5 class="mb-10" v-html="item.title"/>
            <div class="p3" v-html="item.description"/>
        </div>
         ....
    </div>
</div>

Yes what i'm understanding is that splide not destroy completely (also if there are this option also destroy: 'completely') for follow to listen the breakpoints and changes maybe...

And the problem is that the flex is disabled by this line of code on destroy: true

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

I found here this temporaly fix with CSS https://github.com/Splidejs/splide/issues/1139

My actual fix for this destroy: true not working is this in Vuejs

<style>
.splide.is-initialized:not(.is-active) .splide__list{
  display: flex;
}
</style>