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

Question

I'm working on a project using nuxt.js, I'm injecting a function in the context of the application as recommended in the official documentation

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

but when I try to call the function inside a props validation I get an error

/plugins/check-props.js

import Vue from 'vue'

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

in a component vue

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

ERROR: Cannot read property '$checkProps' of undefined

Does anyone know how I can access "this" within validation?

thanks in advance!

Answer 1

Props validation is done before the component is initialized, so you won't have access to this as you are extending Vue.prototype .

Form their documentation :

Note that props are validated before a component instance is created, so instance properties (eg data, computed, etc) will not be available inside default or validator functions.

In general, if $checkProps is only used for checking the value of these props, I would just use a helper function.

// 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);
       }
    }
}

Update

Based on your comments, if you don't want to import this specific function over and over again, you can just Array.prototype.includes see docs

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

Answer 2

From the doc :

props are validated before a component instance is created, so instance properties (eg data, computed, etc) will not be available inside default or validator functions

Answer 3

If you want to access the nuxt plugins you can always use the window object.This is how I do it to access the i18n library

{
   validator: (value: any): boolean => {
      return window.$nuxt.$te(value);
   }
}

In your case:

{
   validator: (value: any): boolean => {
      return window.$nuxt.$checkProps(value, ['success', 'danger']);
   }
}

In any case you should never prototype in the window object. Let nuxt handle it with a plugin:

path: plugins/check-props.js or .ts

function checkProps(value: any, arr: string[]): boolean {
  return arr.indexOf(value) !== -1
}

const $checkProps: Plugin = (_context: Context, inject: Inject) => {
  inject('checkProps', checkProps);
};

export default $checkProps;

And then in nuxt config

{
  plugins: [{ src: 'plugins/check-props.js', ssr: true }]
}