Failed to load slider when using on Dynamic Component

[theromie]

I am loading component dynamically like <component :is="currentView"></component> but slider range left and right stuck to 0. I also use :real-time property but doesn't worked. How can i reinitialize vueslider? <vue-slider ref="slider1" v-bind="price" v-model="price.value" :real-time="true"></vue-slider>

[NightCatSama]

this.$ref.slider1.refresh() can refresh the component.

[theromie]

Error in mounted hook: "TypeError: Cannot read property 'slider1' of undefined"

[NightCatSama]

oops, my apologies, it should be this.$refs.slider.refresh().

https://vuejs.org/v2/guide/components.html#Child-Component-Refs

[theromie]

This should be inside mounted()? because i am facing same issue

[NightCatSama]

After the component is rendered, then call this method.

[theromie]

No man not working

[NightCatSama]

You can see here can give you inspiration: https://jsfiddle.net/9pp3dqkq/54/

[theromie]

Dude onclick of refresh is not going to 100

[NightCatSama]

[theromie]

I am using getuikit and showing slider inside dropdown but dropdown failed to refresh vue slider

[NightCatSama]

Maybe you can try to listen for the shown event and call refresh later to refresh the component.

[theromie]

UIkit.dropdown(element).shown({ this.$refs.daysSlider.refresh(); }); Syntax Error: this is a reserved word

[theromie]

I also have updated your jsfiddle to work with dropdown of uikit Snippets

[NightCatSama]

https://jsfiddle.net/9pp3dqkq/94/

[theromie]

thanks its working

[theromie]

what if i want to do it like UIkit.dropdown(element).shown({ this.$refs.daysSlider.refresh(); });

[NightCatSama]

That's not the UIkit binding of events.

look it: https://getuikit.com/docs/javascript#programmatic-use

$('#offcanvas').on('show', function () {
    // do something
});