Is there any way to track nested property types on Vue?

I have this props setup:

// ...
props: {
    navigation: {
        type: [Array],
        default: () => {
            return [
                { type: String, icon: "home" },
                { type: String, icon: "star" }
            ]
        }
    }
}

right now i have validation only for first level which is array, but nothing happens inside of it. Can i check types inside one of type level? Thx for help.

Is there any way to track nested property types on Vue?

I have this props setup:

// ...
props: {
    navigation: {
        type: [Array],
        default: () => {
            return [
                { type: String, icon: "home" },
                { type: String, icon: "star" }
            ]
        }
    }
}

right now i have validation only for first level which is array, but nothing happens inside of it. Can i check types inside one of type level? Thx for help.

• javascript
• vue.js

• What do you mean by "track nested property types"? Do you mean, be able to assign types to them and have the piler warn you when you are not plying with those types? – AJP Commented May 11, 2017 at 11:14
• yeap, that's right – Lukas Commented May 11, 2017 at 11:15
• And are you referring to the return type from the default function? – AJP Commented May 11, 2017 at 11:15
• yes, but what with the next level, i.e. of this icon strings? – Lukas Commented May 11, 2017 at 11:16
• What do you want navigation to be? You have currently said it's type should be an Array but the default function you have defined returns an array of objects (with keys type and icon). Note from the examples in the docs you posted it doesn't look like you type the return value from the default function. – AJP Commented May 11, 2017 at 12:04

3 Answers 3

I don't think it's possible to directly type the array of objects using the type attribute as Vue prop validation says:

The type can be one of the following native constructors:

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

Having said that it looks like you could define a validator function like:

props: {
    navigation: {
        validator: function (value) {
            if (!(value instanceof Array)) {
                return false;
            }
            for(var i = 0; i < value.length; ++i) {
                if (typeof value.icon !== "string") {
                    return false;
                }
            }
            return true;
        },
        default: () => {
            return [
                {icon: "home" },
                {icon: "star" }
            ]
        }
    }
}

In addition to typescript and library like vue-types, I find _.every and _.has from lodash can make pretty readable solution for validating plicated prop.

import every from 'lodash/every'
import has from 'lodash/has'

export default {
  name: 'navigation',
  props: {
    items: {
      type: Array,
      validator: items =>
        every(items, (item) =>
          has(item, 'home') &&
          has(item, 'star')
        )
    }
  }
}

You can even write has(item, 'home.adress.zip') for deep nest object!

vue-types makes this easy to do. In the following example, notice the Array of strings:

    props: {

        picNum: VueTypes.number.def( 3 ),
        pics: VueTypes.arrayOf( String ).isRequired, // RIGHT HERE!
        step: VueTypes.number.def( 1 ),
        className: VueTypes.string.def( '' ),

    },

Plus vue-types has more helpers for defining the shape of objects, etc. Super nice to use with Vue props!