How can I run slider in vue component?

My view like this :

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

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 warn]: Error in created hook: "TypeError: $(...).slick is not a function"

How can I solve it?

Answer1:

Ok, try this.

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

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:How can I run slider in vue component?