如何在vue组件中运行滑块? [英] How can I run slider in vue component?

问题描述

我的观点是这样的:

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

我的顶级联赛组成部分像这样:

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'],
        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中，但是出现错误

When loaded the first time, there are 5 items of data displayed in the form of sliders. I tried putting this code : $('.slick').slick({slidesToShow: 3, infinite: false}); in created, but there was an error

如果执行了代码，则存在这样的错误:

If the code executed, there exist error like this :

[Vue警告]:创建的钩子中出现错误:"TypeError:$(...).slick不是 功能"

[Vue warn]: Error in created hook: "TypeError: $(...).slick is not a function"

我该如何解决?

推荐答案

好，试试看.

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

这篇关于如何在vue组件中运行滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！