關於Quasar的Carousel的q-carousel-slide設定

quasar carousel 輪播 carousel-slide

文科少女 2020-11-22 17:08:34 ‧ 1831 瀏覽

分享至

最近在學習使用Quasar，一看到有輪播功能就迫不及待地學了這部分。
但是已經依照指示使用，卻還是無法正常顯示，也查了很多資料試圖排除這個狀況，但依然沒有答案，所以想請問各位大大有沒有遇過這樣的問題><

我遇到的問題是:

q-carousel的設定正常，但是q-carousel-slide的設定無法正常套用，不論是放純文字或是圖片都是一樣的狀況。
這個部分寫的內容如下

q-carousel的左右切換箭頭有正常顯示
打開DevTools確認到的狀況如圖片紅框顯示，裡面是空的，沒有文字，也沒有圖片。

進行流程如下:

先在quasar.conf.js的framework裡面的components放入Carousel, CarouselSlide
再寫以下這部分

另外，在嘗試排除錯誤時，有發現即使quasar.comf.js裡面沒有放入Carousel, CarouselSlide，依然可以套用q-carousel這個部分。

希望大大們能指引我一些方向，謝謝><

小碼農米爾 iT邦高手 1 級 ‧ 2020-11-22 21:32:08 檢舉

有點像程式出錯，可以看一下 Console 有沒有紅字
可能是沒有綁到 v-model (猜測)

文科少女 iT邦新手 4 級 ‧ 2020-11-22 22:34:15 檢舉

感謝大大的提醒，我居然沒檢查有沒有出現錯誤訊息><
順利解決了，非常感謝:)

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

通靈亡

iT邦高手 1 級 ‧ 2020-11-22 22:42:28

最佳解答

q-carousel 請設定v-model="slide"，並在data()設定對應的變數
每一個q-carousel-slide，都需要給他對應的name
q-carousel才知道目前是顯示到哪一個「q-carousel-slide」
q-carousel-slide 設定圖片路徑是用「img-src」而不是「src」
請參考文件Media content的範例
https://quasar.dev/vue-components/carousel

如果有正常設定，是可以顯示的
https://codepen.io/ted59438/pen/VwjJOKq?editors=1010

<template>
  <div class="q-pa-md">
    <q-carousel
      infinite
      arrows          
      swipeable
      v-model="slide"
      navigation
    >
      <q-carousel-slide name="a" class="bg-red text-white">
        <div>
          dee
        </div>
        222222222222222
      </q-carousel-slide>
      
      <q-carousel-slide name="b" img-src="https://cdn.quasar.dev/img/mountains.jpg"></q-carousel-slide>
      <q-carousel-slide name="c" img-src="https://cdn.quasar.dev/img/parallax1.jpg"></q-carousel-slide>
      <q-carousel-slide name="d" img-src="https://cdn.quasar.dev/img/parallax2.jpg"></q-carousel-slide>
      <q-carousel-slide name="e" img-src="https://cdn.quasar.dev/img/quasar.jpg"></q-carousel-slide>
    </q-carousel>
  </div>
</template>

<script>
export default {
  data () {
    return {
      slide: 'a'
    }
  }
}
</script>