[解決済み] VEndを用いた入力規則と要求事項

質問内容

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 このミキシンは、フィールドからの値を順番にそれぞれの rules .

問題は、どのようにすれば rule の状態に依存します。 required フィールドを使用しますか？

解決方法は？

を取得するためには、arrow関数の代わりに従来の関数を使用する必要があります。 プロップのデータ

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