原本的 vuetify 範例是

  <v-sheet
    class="mx-auto bg-blue-600"
    elevation="0"
    max-width="1200"
  >

  </v-sheet>

現在想用動態的傳入 props 可以改用 :max-width

  <v-sheet
    class="mx-auto bg-blue-600"
    elevation="0"
    max-width="mw"
  >

  </v-sheet>
<script>
  export default {
    props: {
        mw: Number,
    },
</script>

然後就能從外部傳遞 props 進來了

<my-home-carousel pc mw="1200"></my-home-carousel>

其實之前已經寫過 passing dynamic data in Laravel blade 概念差不多
https://jntng.coderbridge.io/2020/10/26/laravel-passing-collection-anonymous-component/

今天踩了兩次 HTML 大小寫的坑
早上才因為 vue 命名用 CamelCase 導致 HTML 沒有 parse (我用了 my-homeCarousel
下午又犯一樣的錯,在 HTML 我用了 maxWidth,這到 vue 會變成 maxwidth,所以我東西一值傳不進來
如果真的很想在 vue 裡用 CamelCase,HTML 應該寫成 max-width

真的有夠不熟 vue








你可能感興趣的文章

D4_課程簡介、檔案格式、前後端差異、寫作業

D4_課程簡介、檔案格式、前後端差異、寫作業

[Release Notes] 20200924_v1 - Fix blog post serie checkbox bug & add publish type modal

[Release Notes] 20200924_v1 - Fix blog post serie checkbox bug & add publish type modal

ES6 相關筆記

ES6 相關筆記






留言討論