Vuetify - How to access data in form rule

11
votes

Can I access a data element in a rule?

Here is my code running

I'm trying to flip the value of a data element on a text field rule in a Vuetify form.

The rule itself works fine, however I'm unable to access the data element, I'm getting this error:

TypeError: Cannot set property 'disabled' of undefined

Here is my code:

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;
      }
    }
  },

What am I doing wrong?

3
javascriptvue.jsvuejs2vue-componentvuetify.js
could you provide a pen contains some of your code? - Boussadjra Brahim
Here is the app actually running. bc-only-rates-trimakas.c9users.io I'm thinking you can see my code in the console. - ToddT
What do you mean by 'flip the value'? - Jim B.
this isn't available to a rule in vuetify. What are you trying to do? Maybe better to disable on the validation result somehow? - Jim B.
you could also use computed property like in this example codepen.io/anon/pen/eQGvxV?editors=1111 - Boussadjra Brahim

3 Answers

29
votes

rules are an array of functions, and if you need the function to be able to access data property, you can define them as component methods:

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;
    }
  }
}

And then in your Vuetify component:

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

try to define rules as computed property :

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;
        } ]
      }
    }
  }
2
votes

While this isn't available to a rule function you can accomplish this by assigning the vue instance to a variable, which will bring it into scope by closure.

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;
                }
            }
        ],
'''