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

问题描述 投票:4回答:3

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

Here is my code running

我试图在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;
      }
    }
  },

我究竟做错了什么?

vue.js vuetify.js
3个回答
11
投票

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>

1
投票

虽然this不适用于规则函数,但您可以通过将vue实例分配给变量来完成此操作,这将通过闭包将其置于范围内。

vm = new Vue({
    el: '#app',
    data: () => ({
        disabled: true,
        rules: [
            value => {
                if (value.length == 0) {
                    vm.disabled = true;
                    return "What are you trying to do here?";  
                }
                else {
                    return true;
                }
            }
        ],
'''

1
投票

尝试将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;
        } ]
      }
    }
  }
热门问题
推荐问题
最新问题