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

道具验证是在初始化组件之前完成的，因此在扩展this时您将无权访问Vue.prototype。

组成他们的documentation：

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

通常，如果$checkProps仅用于检查这些道具的价值，我只会使用一个辅助函数。

// 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 see docs

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

Answer 2

来自doc：

props在创建组件实例之前先经过验证，因此实例属性（例如数据，计算的等）将不可用内部默认或验证器功能

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

2 个答案:

更新