使用extend的VInput规则和要求

Question

我正在使用 Vue+Vuetify，我需要重新设计一个自定义选择器组件。

当前代码如下所示：

<template>
  <v-autocomplete
    :id="id"
    v-model="internalValue"
    :clearable="clearable"
    :disabled="disabled"
    :hide-details="hideDetails"
    :label="label"
    :readonly="readonly"
    :required="required"
    :rules="rules"
    :items="items"
    item-value="id"
    item-text="name"
    no-data-text="No data"
  />
</template>

<script>
export default {
  name: 'MyCustomSelector',
  props: {
    value: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: null,
    },
    required: Boolean,
    clearable: Boolean,
    hideDetails: Boolean,
    disabled: Boolean,
    readonly: Boolean,
  },
  data() {
    return {
      items: [],
      rules: [
        (value) => {
          if (this.required) {
            return !!value || 'This field is empty'
          } else {
            return true
          }
        },
      ],
    }
  },
  apollo: {
    // apollo logic
      ...
      this.items = loadedItems
      ...
  },
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(newVal) {
        this.$emit('input', newVal)
      },
    },
  },
}
</script>

如您所见，几乎所有代码都只是 props 遍。所以我决定将代码更改为：

<script>
import VAutocomplete from 'vuetify/lib/components/VAutocomplete'

export default VAutocomplete.extend({
  name: 'MyCustomSelector',
  props: {
    itemText: {
      type: String,
      default: 'name',
    },
    itemValue: {
      type: String,
      default: 'id',
    },
    rules: {
      type: Array,
      default: () => [
        (value) => {
          if (this.required) {
            return !!value || 'This field is empty'
          } else {
            return true
          }
        },
      ],
    },
    noDataText: {
      type: String,
      default: 'No data',
    },
  },
  apollo: {
    // apollo logic
      ...
      this.cachedItems = loadedItems
      ...
  },
})
</script>

一切都很好，但有一个小问题 - prop rules 无法按我想要的方式工作，因为 this.required 未知。

这个 prop 取自 Validatable mixin，其中字段的值被简单地依次替换为每个 rules.

问题是，如何编写 rule 取决于 required 字段状态的代码？

Answer 1

你必须使用传统函数而不是箭头函数，才能得到道具数据

 rules: {
  type: Array,
  // change to the traditional function
  default: function () {
    return [
      (value) => {
        if (this.required) {
          return !!value || "This field is empty";
        } else {
          return true;
        }
      },
    ];
  },
},

使用extend的VInput规则和要求

VInput rules and requirements using extend

javascript

vue.js

vuetify.js