Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue and TypeScript required prop

I added a required prop to my component class using vue-property-decorator, but when I tried using the component without the prop, I didn't see any console errors that indicate the required prop is missing. Why?

export default class Test extends Vue {
  @Prop() private message!: string;
}

The following code yields no errors as expected:

<test message="Hello" />

The following code should result in an error but doesn't:

<test />
like image 251
mira Avatar asked Jun 28 '19 04:06

mira


People also ask

Are props required by default Vue?

All props are optional by default, unless required: true is specified. An absent optional prop other than Boolean will have undefined value. The Boolean absent props will be cast to false .

Does Vue require TypeScript?

Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box.

Does Vue use props?

In this article, we have learned what props do and how props works in Vue. js. In summary, we use props to pass down data from the parent components to the child component(s). The child component also emit events to the parent component(s) in case you need to send data/events from the child to the parent component.


Video Answer


1 Answers

The @Prop decorator takes a PropOptions object, which contains a required property with a default value of false. To make message required, specify required: true in your @Prop declaration:

@Prop({ required: true }) private message!: string;

Edit Vue Template

like image 176
tony19 Avatar answered Oct 24 '22 15:10

tony19