vue3 component child property with typescript

Question

This child property transfer does not work.

<ProductItemView :productItem="productItem"/>

The code of child component is:

<h4>{{ productItem.title }}</h4>

import { Vue } from 'vue-class-component';
import { ProductItem } from '../../store/types/productitem';
    
export default class ProductItemView extends Vue {
  productItem: ProductItem = {
    id: 0,
    title: '',
    description: '',
    product_type: '',
    image_tag: '',
    created_at: 2000,
    owner: '',
    owner_photo: '',
    email: '',
    price: 0.0
  }
}

Unfortunately the property is not set from this parent component.

<template>
  <div class="container is-fluid">
    <div class="tile is-ancestor">
      <div class="tile is-parent" v-for="productItem in productItems" :key="productItem.id">
      <ProductItemView :productItem="productItem"/>
      </div>
    </div>
  </div>
</template>

What I am doing wrong? productItem is a property of the child component. And I call it from the parent component with :productItem.

tony19 · Accepted Answer · 2021-05-15 20:53:07Z

1

productItem is declared as a local data variable, which is not exposed as a public prop. The component template thus refers only to the local data variable, so it shows the default value of productItem.title (an empty string).

You could either move that to @Options under props:

import { PropType } from 'vue';
import { Vue, Options } from 'vue-class-component';

@Options({
  props: {
    productItem: {
      type: Object as PropType<ProductItem>,
      default: () => ({
        id: 0,
        title: '',
        description: '',
        product_type: '',
        image_tag: '',
        created_at: 2000,
        owner: '',
        owner_photo: '',
        email: '',
        price: 0.0
      })
    }
  }
})
export default class ProductItemView extends Vue {
}

Or use @Prop from vue-property-decorator (using the rc version (10.x) to support Vue 3):

import { Prop } from 'vue-property-decorator';
import { Vue } from 'vue-class-component';

export default class ProductItemView extends Vue {
  @Prop({ default: {
    id: 0,
    title: '',
    description: '',
    product_type: '',
    image_tag: '',
    created_at: 2000,
    owner: '',
    owner_photo: '',
    email: '',
    price: 0.0
  }})
  productItem!: ProductItem
}

answered May 15, 2021 at 20:53

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ora Over a year ago

Thank You very much. I prefer the first variant. Is there any document about this and more?

tony19 Over a year ago

It's currently only documented in this GitHub issue.

Collectives™ on Stack Overflow

vue3 component child property with typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related