Vue+Vuetify使用extend继承VAutocomplete时rules依赖required的实现问题

问题根因 #

Vue 框架设计中，Prop 的默认值工厂函数执行上下文不指向组件实例，因此你写在 rules Prop 默认值里的校验函数闭包无法获取到正确的组件实例 this，自然读不到 this.required 的值。

解决方案 #

将内置规则的生成逻辑放到计算属性中实现，同时保留外部传入自定义规则的能力：

1. 删掉你现在写在 props 配置里的 rules 定义
2. 新增同名 computed 属性覆盖原有 rules 取值，代码如下：

import VAutocomplete from 'vuetify/lib/components/VAutocomplete'

export default VAutocomplete.extend({
  name: 'MyCustomSelector',
  props: {
    itemText: {
      type: String,
      default: 'name',
    },
    itemValue: {
      type: String,
      default: 'id',
    },
    noDataText: {
      type: String,
      default: 'No data',
    },
  },
  computed: {
    rules() {
      // 读取外部传入的自定义规则，没有传入则默认是空数组
      const customRules = this.$attrs.rules || []
      // 合并内置必填规则和用户自定义规则
      return [
        (value) => {
          if (this.required) {
            return !!value || 'This field is empty'
          }
          return true
        },
        ...customRules
      ]
    }
  },
  apollo: {
    // apollo logic
    // ...
    this.cachedItems = loadedItems
    // ...
  },
})

这个方案下，计算属性会自动响应 required Prop 的变化，校验规则会跟着 required 的状态动态更新，同时外部传入的自定义规则也能正常生效，完全符合需求。

内容的提问来源于stack exchange，提问作者tetelevm