Vuetify - 如何访问表单规则中的数据

Question

我可以访问 rule 中的数据元素吗？

这是我的代码运行

我正在尝试翻转 Vuetify 表单中文本字段规则上的 data 元素的值。

规则本身工作正常，但我无法访问数据元素，出现此错误：

TypeError: Cannot set property 'disabled' of undefined

这是我的代码：

 data: function() {
return {
  disabled: false,
  rules:{
    sellerId(value){
      if(value.length == 0){
        this.disabled = true;
        return "What are you trying to do here?";
      }
      else{
        return true;
      }
    }
  },

我究竟做错了什么？

原文由 ToddT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

rules 是一个函数数组，如果你需要函数能够访问 data 属性，你可以将它们定义为组件方法：

 data: function () {
  return {
    disabled: false
  }
},
methods: {
  sellerId (value) {
    if (value.length === 0) {
      this.disabled = true;
      return "What are you trying to do here?";
    } else {
      return true;
    }
  }
}

然后在你的 Vuetify 组件中：

 <v-text-field :rules="[ sellerId ]"></v-text-field>

原文由 Psidom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试将 rules 定义为 computed 属性：

 data: function() {
    return {
      disabled: false,
      ...
    }
  },
  computed: {
    sellerIdRules() {
      return [
         (v) => {
        if (value.length == 0) {
          this.disabled = true;
          return "What are you trying to do here?";
        } else {
          return true;
        } ]
      }
    }
  }

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议