Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On destroyed method unassigned after first destroy in breakpoints #87

Open
2 tasks done
maxkopych opened this issue Apr 6, 2023 · 1 comment
Open
2 tasks done
Labels
bug Something isn't working

Comments

@maxkopych
Copy link

Checks

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>
@maxkopych maxkopych added the bug Something isn't working label Apr 6, 2023
@arturmamedov
Copy link

arturmamedov commented Jun 5, 2024

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 Splidejs/splide#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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants