質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

4328閲覧

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

ryu_t

総合スコア58

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

1クリップ

投稿2019/02/07 04:41

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

html

1<template> 2 <div id="page"> 3 <div id="contents"> 4 <slick ref="slick" :options="slickOptions"> 5 <div class="card-carousel--card" v-for="item in items"> 6 <!-- 現在はパスをEVENT_DETAIL_PATH+item.urlにしているが、詳細をつかわずJSONでURLをもらえばイベンターはイベント一覧にいくことができるのでは? --> 7 <router-link v-if="listname!='eventers'" v-bind:to="EVENT_DETAIL_PATH+item.url"> 8 <img :src="item.img"> 9 <div class="card-carousel--card--footer" style="width:200px"> 10 <p>{{ item.title }}</p> 11 </div> 12 </router-link> 13 <router-link v-if="listname=='eventers'" @click="getEventListByOrgnizerId(item.url)" v-bind:to="EVENT_PATH+'?orgnizerId='+item.url"> 14 <img :src="item.img"> 15 <div class="card-carousel--card--footer" style="width:200px"> 16 <p>{{ item.title }}</p> 17 </div> 18 </router-link> 19 </div> 20 </slick> 21 </div><!-- / #contents --> 22 <input type="hidden" id="refresh" value="no"> 23 </div><!-- #page --> 24 25</template>

vue

1<script> 2import Slick from 'vue-slick'; 3 4export default { 5 props:['listname'], 6 components: { Slick }, 7 data() { 8 return { 9 slickOptions: { 10 slidesToShow: 4, 11 }, 12 currentOffset: 0, 13 windowSize: 3, 14 paginationFactor: 220, 15 items: [ 16 17 ], 18 }; 19}, 20 21computed: { 22 atEndOfList() { 23 return ( 24 this.currentOffset <= 25 this.paginationFactor * -1 * (this.items.length - this.windowSize) 26 ); 27 }, 28 atHeadOfList() { 29 return this.currentOffset === 0; 30 } 31}, 32created:function(){ 33}, 34mounted:function(){ 35 console.log(this.listname); 36 this.getList(this.listname); 37}, 38methods: { 39 getEventListByOrgnizerId(oId) { 40 fetch("static/data/EventList.json"+"?orgnizerId="+oId).then(function(response) { 41 return response.json(); 42 }).then(myJson => { 43 console.log(myJson); 44 // localStorage.events = Object.assign([], JSON.stringify(myJson.events)); 45 // console.log(JSON.stringify(myJson.events)); 46 localStorage.setItem('events',JSON.stringify(myJson.events)) 47 localStorage.setItem('pages',JSON.stringify(myJson.pages)) 48 this.events = myJson.events; 49 this.pages = Number(myJson.pages); 50 // console.log(this.events); 51 }); 52 }, 53 moveCarousel(direction) { 54 // Find a more elegant way to express the :style. consider using props to make it truly generic 55 if (direction === 1 && !this.atEndOfList) { 56 this.currentOffset -= this.paginationFactor; 57 } else if (direction === -1 && !this.atHeadOfList) { 58 this.currentOffset += this.paginationFactor; 59 } 60 }, 61 62 getList(listname) { 63 if(listname=='new'){ 64 //あなたへのおすすめ 65 fetch("static/data/TopEventList.1.json").then(function(response) { 66 return response.json(); 67 }).then(myJson => { 68 this.items = myJson.events; 69 }); 70 }else if(listname=='usersNew'){ 71 //エリアの新着 72 fetch("static/data/TopEventList.2.json").then(function(response) { 73 return response.json(); 74 }).then(myJson => { 75 this.items = myJson.events; 76 }); 77 }else if(listname=='eventers'){ 78 //過去参加した主催者のイベント 79 fetch("static/data/TopEventList.3.json").then(function(response) { 80 return response.json(); 81 }).then(myJson => { 82 this.items = myJson.events; 83 }); 84 }else{ 85 fetch("static/data/TopEventList.json").then(function(response) { 86 return response.json(); 87 }) 88 .then(myJson => { 89 this.items = myJson.events; 90 }); 91 } 92 }, 93 next() { 94 this.$refs.slick.next(); 95 }, 96 prev() { 97 this.$refs.slick.prev(); 98 }, 99 reInit() { 100 // Helpful if you have to deal with v-for to update dynamic lists 101 this.$nextTick(() => { 102 this.$refs.slick.reSlick(); 103 }); 104 }, 105} 106 107}; 108</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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() }) }

投稿2019/02/07 05:00

編集2019/02/08 01:55
7Kreuz

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryu_t

2019/02/07 08:48 編集

ご回答ありがとうございます。追加してみましたが、ダメでした・・ カルーセルを追加してみたのですが、追加した部分は問題ないのですがv-for部分は飛び出してしまいます・・ ですが、、 ><slick ref="slick" :options="slickOptions"> の上に ><div style="display:none;">{{this.items[0]['url']}}</div> を追記して、エラーが起きるようにすると正常に表示されました・・ (エラーは起きてますが・・) なぜなのでしょうか? エラーを起こさず、正常に表示できないものでしょうか?
ryu_t

2019/02/08 01:22

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

2019/02/08 03:22

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問