Vue.js 为什么单击vue组件上的另一个选项卡时滑块不工作？

我的看法是：

@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>

<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>

@foreach（$leagues作为$league）
...
导出默认值{
...
道具：['leagueId']，
安装的（）{
setTimeout（函数（）{
$（'.slick'）.not（'.slick初始化'）.slick（{slidesToShow:3，infinite:false}）；
}  , 10000 );
},
创建（）{
this.gettoplague（[{league\u id:this.leagueId}]）//如果先加载，这就是ajax
},
计算：{
…地图绘制者([
“getListLeague”
]),
项目（）{
常量n=['getListLeague']
返回此[n[0]]//这是响应ajax//exist 5
}
},
方法：{
…映射操作([
“getTopLeague”
]),
变革联盟（联盟）{
this.gettoplague（[{league\u id:leagueId}]）//如果单击链接，这就是ajax
setTimeout（函数（）{
$（'.slick'）.not（'.slick初始化'）.slick（{slidesToShow:3，infinite:false}）；
console.log（'test'）
}  , 10000 );
}
}
}

第一次加载时，有5项数据以滑块的形式显示。滑块可以工作。但是如果我点击另一个标签。例如，单击联赛B，滑块不起作用。而console.log（'test'）的结果已经运行

---

我如何解决它？

你得到正确的

联盟ID

，你能创建一个复制它的虚拟小提琴吗？@Saurabh，是的，我得到正确的联盟ID。问题是，如果我单击另一个选项卡，滑块不起作用。你能创建一个复制它的虚拟小提琴吗？@Saurabh，太难了。因为我在ViewBlade laravel和vue组件之间进行了组合