v-forが完了後にslickを実行したい

Question

v-forが実行される前にslickが実行されているせいか、カルーセルの要素としてにんしきされておりません。
v-forが完了後にslickが実行される方法はありますでしょうか？

<template>
	<div id="page">
		<div id="contents">
			<slick ref="slick" :options="slickOptions">
				<div class="card-carousel--card" v-for="item in items">
					<!-- 現在はパスをEVENT_DETAIL_PATH＋item.urlにしているが、詳細をつかわずJSONでURLをもらえばイベンターはイベント一覧にいくことができるのでは？ -->
					<router-link v-if="listname!='eventers'" v-bind:to="EVENT_DETAIL_PATH+item.url">
						<img :src="item.img">
						<div class="card-carousel--card--footer" style="width:200px">
							<p>{{ item.title }}</p>
						</div>
					</router-link>
					<router-link v-if="listname=='eventers'"  @click="getEventListByOrgnizerId(item.url)" v-bind:to="EVENT_PATH+'?orgnizerId='+item.url">
						<img :src="item.img">
						<div class="card-carousel--card--footer" style="width:200px">
							<p>{{ item.title }}</p>
						</div>
					</router-link>
				</div>
			</slick>
		</div><!-- / #contents -->
		<input type="hidden" id="refresh" value="no">
	</div><!-- #page -->
	
</template>

<script>
import Slick from 'vue-slick';

export default {
	props:['listname'],
	components: { Slick },
	data() {
		return {
			slickOptions: {
			slidesToShow: 4,
		},
		currentOffset: 0,
		windowSize: 3,
		paginationFactor: 220,
		items: [

		],
	};
},
  
computed: {
	atEndOfList() {
		return (
			this.currentOffset <=
			this.paginationFactor * -1 * (this.items.length - this.windowSize)
		);
	},
	atHeadOfList() {
		return this.currentOffset === 0;
	}
},
created:function(){
},
mounted:function(){
	console.log(this.listname);
	this.getList(this.listname);
},
methods: {
	getEventListByOrgnizerId(oId) {
		fetch("static/data/EventList.json"+"?orgnizerId="+oId).then(function(response) {
			return response.json();
		}).then(myJson => {
			console.log(myJson);
			// localStorage.events = Object.assign([], JSON.stringify(myJson.events));
			// console.log(JSON.stringify(myJson.events));
			localStorage.setItem('events',JSON.stringify(myJson.events))
			localStorage.setItem('pages',JSON.stringify(myJson.pages))
			this.events = myJson.events;
			this.pages = Number(myJson.pages); 
			// console.log(this.events);
		});
	},
	moveCarousel(direction) {
		// Find a more elegant way to express the :style. consider using props to make it truly generic
		if (direction === 1 && !this.atEndOfList) {
			this.currentOffset -= this.paginationFactor;
		} else if (direction === -1 && !this.atHeadOfList) {
			this.currentOffset += this.paginationFactor;
		}
    },
    
	getList(listname) {
		if(listname=='new'){
			//あなたへのおすすめ
			fetch("static/data/TopEventList.1.json").then(function(response) {
				return response.json();
			}).then(myJson => {
				this.items = myJson.events;
			});
		}else if(listname=='usersNew'){
			//エリアの新着
			fetch("static/data/TopEventList.2.json").then(function(response) {
				return response.json();
			}).then(myJson => {
				this.items = myJson.events;
			});
		}else if(listname=='eventers'){
			//過去参加した主催者のイベント
			fetch("static/data/TopEventList.3.json").then(function(response) {
				return response.json();
			}).then(myJson => {
				this.items = myJson.events;
			});
		}else{
			fetch("static/data/TopEventList.json").then(function(response) {
				return response.json();
			})
			.then(myJson => {
				this.items = myJson.events;
			});
    	}
	},
	next() {
		this.$refs.slick.next();
	},
	prev() {
		this.$refs.slick.prev();
	},
	reInit() {
		// Helpful if you have to deal with v-for to update dynamic lists
		this.$nextTick(() => {
			this.$refs.slick.reSlick();
		});
	},
}
  
};
</script>

Answer 1

mountedの中にthis.reInit()を追加するだけで良さそうですが、どうでしょう。

あ、すみませんわかりました。原因はgetListで非同期処理を行っていることですね。最も手っ取り早い解決は、getList内の各分岐のthis.items = myJson.events;（4箇所）の直後にthis.reInit();を付け足すことだと思われます。

とりあえずそれで動くなら、もっとスッキリ書く方法もありそうですので、もうちょい考えてみます。

（追記）
調べてみると、
https://github.com/staskjs/vue-slick/issues/52
https://github.com/staskjs/vue-slick/issues/45
このへんに上がっていますね。
reInitを次のように書き換えるとどうでしょう？

reInit() {
    this.$refs.slick.destroy()
    this.$nextTick(() => {
        this.$refs.slick.create()
    })
}

Comments

[ryu_t]

ご回答ありがとうございます。追加してみましたが、ダメでした・・
カルーセルを追加してみたのですが、追加した部分は問題ないのですがv-for部分は飛び出してしまいます・・

ですが、、
><slick ref="slick" :options="slickOptions">
の上に
><div style="display:none;">{{this.items[0]['url']}}</div>
を追記して、エラーが起きるようにすると正常に表示されました・・
(エラーは起きてますが・・)

なぜなのでしょうか？
エラーを起こさず、正常に表示できないものでしょうか？

[ryu_t]

ご回答ありがとうございます。
そうなのですね！ですがthis.reInit();をつけ足しても、slickが走らずスライダーになりません。。

[ryu_t]

正常に表示されるようになりました。
ご丁寧に回答して頂きありがとうございました。