如何在 vue 组件中运行滑块？

Posted 2023-02-23

【中文标题】如何在 vue 组件中运行滑块？

【英文标题】：How can I run slider in vue component?

【发布时间】：2017-12-27 16:15:35

【问题描述】：

我的看法是这样的：

@foreach($leagues as $league)
    <a @click="$refs.leagues.changeLeague( $league->id )">
         $league->name 
    </a>
@endforeach
...
<top-league class="slick" league-id=" $league_id " ref="leagues"></top-league>

我的***联赛组件 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'],
        created() 
            $('.slick').slick(slidesToShow: 3, infinite: false);
            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     
            
        
    
</script>

第一次加载时，有5条数据以滑块的形式显示。我尝试将这段代码：$('.slick').slick(slidesToShow: 3, infinite: false); 放入created，但出现错误

如果代码执行，会出现这样的错误：

[Vue 警告]：创建钩子时出错：“TypeError: $(...).slick 不是 函数”

我该如何解决？

【问题讨论】：

看起来你还没有在组件文件中导入 slick。

@Roy J，如果此代码：$('.slick').slick(slidesToShow: 3, infinite: false);，我在控制台上复制并运行它，它可以工作。但它是通过组件vue，它不起作用。似乎是因为我使用 ajax

【参考方案1】：

好的，试试这个。

<template>
   <div ref="slick">
      <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>
  </div>
</template>
<script>
    ...
    export default 
        ...
        props: ['leagueId'],
        mounted() 
            $(this.$el).slick(slidesToShow: 3, infinite: false);
            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     
            
        
    
</script>

【讨论】：

存在错误：Uncaught ReferenceError: jQuery is not defined

你需要在你的 Vue 实例之前加载 jQuery 和 Slick。

我已经加载了它。当我运行 gulp watch 时发生错误。错误：SyntaxError: Unexpected token。因为这个代码：$(this.$refs.slick).slick(slidesToShow: 3, infinite: false);。如果我删除代码，则没有错误

如果我在控制台上复制此代码：$('.slick').slick(slidesToShow: 3, infinite: false); 并运行它，它可以工作。

存在错误：[Vue warn]: Error in mounted hook: "TypeError: $(...).find(...).slick is not a function"