Vue props 隨筆


原本的 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








Related Posts

Day05: GraphQL - Types and Schema wiht node.js

Day05: GraphQL - Types and Schema wiht node.js

CSS保健室|box-decoration-break

CSS保健室|box-decoration-break

Day07_Origami學習筆記

Day07_Origami學習筆記




Sponsored



Comments