CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Benny
Benny

Reputation: 879

How can I mix different data types in props array of a component in vue.js?

I am struggling with understanding how I can pass several different data types as props to a child component. I have an object and two strings that I would like to pass as props from the parent to the child component.

This is how I want to pass the props from the parent component to the child component prov-activity:

<prov-activity :activity="{{$activity}}" :apikey="     
{{$apikey}}" :geocodelink="
{{$geocodelink}}"></prov-activity>

This is how the child component receives the props:

props: [{ 'activity' : Boolean }, 'googlemapsapikey', 'googlemapsgeocodelink']

Activity is an object, whereas the other two are strings passed as props.

The warning message I receive now is the following:

[Vue warn]: props must be strings when using array syntax.

And it seems the activity is not being passed properly anymore, as I receive this error as well:

Property or method "activity" is not defined on the instance but  
referenced during render. Make sure that this property is reactive, either 
in the data option, or for class-based components, by initializing the property

How do I define the props array properly so that I can get the object and the two strings into my child component???

I know I can simply do this props:[ 'activity', 'geocodelink', 'apikey' ], however, out of some other code logic, I need to preserve the 'activity' as a type Boolean, so how can I accomplish this?

Upvotes: 2

Views: 3350

Answers (1)

Bert
Bert

Reputation: 82489

You need to use either the array syntax or the object syntax to define the props, you can't combine both. In this case, you want to use the object syntax.

Your props should look like this.

props: {
  activity: Boolean,
  googlemapsapikey: String,
  googlemapsgeocodelink: String
}

Upvotes: 4

Related Questions