create prop with id value pair in vue using javascript

Question

In typescript, i have seen the prop is initialized like this below in vue component.

@Prop({ type: Object }) tabDetails: tabDetailsTypes

This tabDetailsTypes is like :

export interface tabDetailsTypes {
  label: string
  name: string
  count: number | string

Same thing i want to create prop in vue component by using JavaScript like this.

props: {
  serverUrls: {
   required: true,
            type: Object,
            default: () => {
             label: '',
             name: '',
             count: 1
     }
  }
}

It is correct syntax or what is the correct syntax for this?

To return and inline Object with ES6 arrows functions, you should escape the braces with parenthesis like: default: () => ({ ... }). Another way is using return statement: default: () => { return { ... } }; — The.Bear
– The.Bear, Commented Mar 16, 2021 at 15:22

Yura · Accepted Answer · 2021-03-16 15:25:12Z

1

If you mean by that to create a prop that the behavior follows Typescript's behavior where your IDE would complaint if you defined something that is unavailable or different by the type on the given properties, or if you want it to serve the available option through intellisense, I don't think you can do that on Javascript.

And as you edited the question, if you want to set the default value, you don't need the required property. Remove that, add braces around the object and all is good.

props: {
  serverUrls: {
    type: Object,
    default: () => ({
      label: 'the default label',
      name: 'the default name',
      id: 1,
    }),
  }
},
mounted() {
  console.log(this.serverUrls)
},

Here is the working example

answered Mar 16, 2021 at 15:25

Yura

2,2882 gold badges23 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

create prop with id value pair in vue using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related