我的观点是这样的:
@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>
我的顶级联赛成员vue如下:
<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>
第一次加载时,有5个数据以滑块的形式显示。滑块有效。但是,如果我单击另一个选项卡。例如,我点击联盟B,滑块不起作用。而console.log(&#39; test&#39;)的结果已经运行
我该如何解决?