CODEWITHSUNDEEP
javascriptvue.js
Callat
Callat

Reputation: 3044

Array of props in vue js?

In Javascript I can have heterogenous arrays such as:

var ex = ['name', 12, true];
console.log(ex);

In Vue JS within a single file template I can define props for a component in the <script></script section by the following:

export default{
props: ['myprop']
}

or by having the props listed as an object to validate the type

export default{
  props: {
    myprop: String
  }
}

Now my question is in vue listing an array of types like myprop: [String,Array] lists multiple valid types for the property.

My question is how can I validate against the content of the array at the props level?

For instance taking ex in the pattern of string,number,boolean and a count of 3. Is there a way to make any value that comes into the prop be invalid if it's not this form?

So if I got some data in the form of [true, 12, 'name'] it'd be invalid. But ex would be valid.

Upvotes: 0

Views: 2942

Answers (1)

Marc
Marc

Reputation: 9344

If I follow, you want to use a custom property validator function. Something like:

props: {
  myprop: {
    type: Array,
    validator: value => {
       return /* test value length, indices types, etc here as truthy/falsy */;
    }
  }
}

The type property is just a simple validation against type, the custom validator allows you to customize exactly what constitutes a valid property for your component.

Upvotes: 1

Related Questions