javascript - 在组件内使用注入的插件会导致问题

Question

这就是我注入插件的方式。

export default ({ app }, inject) => {
  inject('rule', {
    required: value => !!value || 'Required',
    email: value => /.+@.+\..+/.test(value) || 'Invalid E-mail format',
    number: value => !isNaN(value) || 'Invalid number format',
    minPrice: (value, maxPrice) => parseFloat(value) <= parseFloat(maxPrice) || 'Value must be less than or equal to max price',
    maxPrice: (value, minPrice) => parseFloat(value) >= parseFloat(minPrice) || 'Value must be greater than or equal to min price',
  });
};

文本字段组件：

<template>
  <v-text-field v-model="form" hide-details="auto" outlined clearable v-bind="$attrs" />
</template>

<script>
export default {
  props: ['value'],
  computed: {
    form: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      },
    },
  },
};
</script>

我像这样使用它：<BaseTextField v-model="form.propertyNumber" label="Property Number" :rules="[$rule.required]" />

它会产生此错误：Cannot read property 'required' of undefined

将其直接安装在 vuetify v-text-field 似乎可以解决问题，但我想在我的自定义组件上使用它来简化我的代码

标签： javascriptvue.jsnuxt.jsvuetify.js