如何在道具验证器中访问“this”

Question

我正在使用 nuxt.js 处理一个项目，我正在按照官方文档中的建议在应用程序的上下文中注入一个函数

https://nuxtjs.org/guide/plugins/#inject-in-root-amp-context

但是当我尝试在 props 验证中调用该函数时，我收到一个错误

/plugins/check-props.js

import Vue from 'vue'

Vue.prototype.$checkProps = function(value, arr) {
  return arr.indexOf(value) !== -1
}

在组件 vue 中

export default {
  props: {
    color: {
      type: String,
      validator: function (value, context) {
        this.$checkProps(value, ['success', 'danger'])
      }
  }
}

ERROR: 无法读取未定义的属性“$checkProps”

有谁知道我如何在验证中访问“this”？

提前致谢！

Answer 1

Props 验证是在组件初始化之前完成的，因此this您在扩展Vue.prototype.

形成他们的文件：

请注意，在创建组件实例之前验证 props，因此实例属性（例如数据、计算等）在默认或验证器函数中将不可用。

一般来说，如果$checkProps只用于检查这些 props 的值，我只会使用一个辅助函数。

// array.helpers.js
export function containsValue(arr, val) {
  return arr.indexOf(value) !== -1
}

// component
import { containsValue } from 'path/to/helpers/array.helpers';
props: {
    foo: {
       //
       validator(value) {
          return containsValue(['foo', 'bar'], value);
       }
    }
}

更新

根据您的评论，如果您不想一遍又一遍地导入此特定功能，则可以Array.prototype.includes 查看文档

// component
props: {
    color: {
       //
       validator(value) {
          return ['success', 'danger'].includes(value);
       }
    }
}