My view like this :
@foreach($leagues as $league)
<a data-toggle="tab" @click="$refs.leagues.changeLeague({{ $league->id }})">
{{ $league->name }}
</a>
@endforeach
...
<div class="tab-pane active">
<top-league class="slick" league-id="{{ $league_id }}" ref="leagues"></top-league>
</div>
My top league component vue like this :
<template>
<div class="row">
<div class="col-md-3" v-for="item in items">
<div class="panel panel-default">
<div class="panel-image">
<a :href="baseUrl+'/leagues/'+item.id+'/'+item.name"
:style="{backgroundImage: 'url(' + baseUrl + '/img/leagues/'+item.photo+ ')'}">
</a>
</div>
</div>
</div>
</div>
</template>
<script>
...
export default {
...
props: ['leagueId'],
mounted(){
setTimeout( function(){
$('.slick').not('.slick-initialized').slick({slidesToShow: 3, infinite: false});
} , 10000 );
},
created() {
this.getTopLeague([{league_id: this.leagueId}]) // this is ajax if load first
},
computed: {
...mapGetters([
'getListLeague'
]),
items() {
const n = ['getListLeague']
return this[n[0]] // this is response ajax // exist 5 league
}
},
methods: {
...mapActions([
'getTopLeague'
]),
changeLeague(leagueId) {
this.getTopLeague([{league_id: leagueId}]) // this is ajax if a link clicked
setTimeout( function(){
$('.slick').not('.slick-initialized').slick({slidesToShow: 3, infinite: false});
console.log('test')
} , 10000 );
}
}
}
</script>
When loaded the first time, there are 5 items of data displayed in the form of sliders. And the slider works. But if I click the another tab. For example I click League B, the slider not works. Whereas the result of console.log('test') had run
How can I solve it?