如何在道具验证器中访问“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.jsexport function containsValue(arr, val) {  return arr.indexOf(value) !== -1}// componentimport { containsValue } from 'path/to/helpers/array.helpers';props: {    foo: {       //       validator(value) {          return containsValue(['foo', 'bar'], value);       }    }}更新根据您的评论，如果您不想一遍又一遍地导入此特定功能，则可以Array.prototype.includes 查看文档// componentprops: {    color: {       //       validator(value) {          return ['success', 'danger'].includes(value);       }    }}