Question

有没有办法在Vue上跟踪嵌套属性类型？

我有这个道具设置：

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

现在我只对第一级进行验证，即数组，但内部没有任何反应。我可以检查类型级别中的类型吗？求助。

Answer 1

除了vue-types之类的打字稿和库之外，我发现来自lodash的_.every和_.has可以为验证复杂道具提供非常易读的解决方案。

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')
        )
    }
  }
}

您甚至可以为深巢对象编写has(item, 'home.adress.zip')！

Answer 2

我认为不可能使用type属性直接输入对象数组，因为Vue prop validation说：

type可以是以下本机构造函数之一：


字符串

数

布尔

功能

对象

阵列

符号

说过你可以定义一个验证函数，如：

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" }
            ]
        }
    }
}

Answer 3

vue-types让这很容易。在以下示例中，请注意字符串数组：

    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有更多帮助器来定义对象的形状等。超级好用于Vue道具！

Vue.js中的嵌套属性类型

3 个答案: