iT邦幫忙

0

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

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

我遇到的問題是:

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

    q-carousel的左右切換箭頭有正常顯示

  2. 打開DevTools確認到的狀況如圖片紅框顯示,裡面是空的,沒有文字,也沒有圖片。

進行流程如下:

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

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

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

有點像程式出錯,可以看一下 Console 有沒有紅字
可能是沒有綁到 v-model (猜測)
感謝大大的提醒,我居然沒檢查有沒有出現錯誤訊息><
順利解決了,非常感謝:)

1 個回答

3
通靈亡
iT邦研究生 2 級 ‧ 2020-11-22 22:42:28
最佳解答
  1. q-carousel 請設定v-model="slide",並在data()設定對應的變數
    每一個q-carousel-slide,都需要給他對應的name
    q-carousel才知道目前是顯示到哪一個「q-carousel-slide」

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

謝謝,已經能正常顯示了 :)

我要發表回答

立即登入回答