How can I run slider in vue component? - vue.js

Question

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?

Answer 1

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>