CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Jon not doe xx
Jon not doe xx

Reputation: 563

Vue Component prop in vuetify component

I am not able to pass data to my custom component, my component uses vuetify, currently I dont get any message:

MY component:

<template>
  <v-layout>
    <v-flex xs12 sm6 offset-sm3>
      <v-card>
        <v-img
          src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
          aspect-ratio="2.75"
        ></v-img>

        <v-card-title primary-title>
          <div>
            <h3 class="headline mb-0">{{ tenantName }}</h3>
            <div>{{ tenantDescription }}</div>
          </div>
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
  export default {
    data () {
      return {
        // ...
      }
    },

    props: ['tenantImage', 'tenantName', 'tenantDescription']
  }
</script>

And this is how I call in my view:

                    <tenant-card
                        imgSrc="https://fuckoffgoogle.de/wp-content/uploads/2017/12/cropped-logo_midres-1.png"
                        :tenantName="my Name is"
                        :tenantDescription="this is a description"
                    ></tenant-card>

The component is registered I see it on my view just without any data.

I get this outside in the page source <div class="layout" tenantimage="https://fuckoffgoogle.de/wp-content/uploads/2017/12/cropped-logo_midres-1.png" tenantname="my Name is" tenantdescription="this is a description"> ...

Upvotes: 0

Views: 6483

Answers (1)

Jns
Jns

Reputation: 3257

The names of your properties are wrong:

<tenant-card
   tenant-image="'https://fuckoffgoogle.de/wp-content/uploads/2017/12/cropped-logo_midres-1.png'"
   :tenant-name="'my Name is'"
   :tenant-description="'this is a description'">
</tenant-card>

HTML attribute names are case-insensitive. Any uppercase character will be interpreted as lowercase. So camelCased prop names need to use their kebab-cased equivalents.

Edit: And as already mentioned by @Sergeon you have to add the extra '' to pass an string as a property value

Upvotes: 2

Related Questions