Question

我无法将数据传递到自定义组件，我的组件使用vuetify，目前我没有收到任何消息：

我的组件：

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

这就是我的看法：

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

该组件已注册，我没有任何数据就可以在视图中看到它。

我在页面源代码之外得到了这个 <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"> ...

Answer 1

您的属性名称错误：

<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属性名称不区分大小写。任何大写字符将被解释为小写。因此，骆驼式道具名称需要使用烤肉串大小写的等效项。

编辑：正如@Sergeon所提到的，您必须添加额外的''才能将字符串作为属性值传递

vuetify组件中的Vue Component道具

1 个答案: