Vuetify: Feature request: use .apply() on v-form validation rule invocations so the Vue instance can be referenced

[davidkhess]

I'm new to Vuetify, but unless I'm missing something, it doesn't appear that I can reference the Vue instance from a validation rule function. I'd like to request a feature where v-form calls validation rules with this set to the Vue instance - it is currently the window object.

• What will it allow you to do that you can't do today?

This will enable you to write validation rules where validation of one field depends on the value of another (for instance, "password" and "confirm password"). Also, in my case I like to suppress all errors until the form has been submitted once. Submission state is tracked on the Vue instance.

• How will it make current work-arounds straightforward?

To my knowledge there is no workaround at the moment.

[KaelWD]

Example codepen: https://codepen.io/anon/pen/rGLzYK?editors=1011

[KaelWD]

It works if data is an actual function instead of a lambda: https://codepen.io/anon/pen/yzJzBx?editors=1011

I tried binding this in the validatable.js@validate method, but then it refers to the input component, not the parent.

[davidkhess]

Thanks, turning data into a function and binding a reference to the Vue instance there worked.

Perhaps I should close this and open an issue in the documentation project requesting an example pointing out this subtlety?

[KaelWD]

It's more a quirk with how functions work in JS rather than anything to do with vuetify, but it might be worthwhile to mention on the docs anyway.

[davidkhess]

Closing – simple JS workaround is available.

[davidkhess]

FYI, my solution:

...
    data: function () {
        var self = this;
        return {
            rules: [
                function () {
                    /* code that references self */
                }
            ]
        };
    }
...

[KaelWD]

With Vue 2.5, you can use a lambda for data again as it now gets passed the vm instance as an argument.

[lcherone]

This way wont work:

data: () => ({
  someRule: [
    v => !!v || 'Something is required',
    v => (v && this.someValidator(v)) || 'Something invalid',
  ]
}),
methods: {
  someValidator(value) {
    // validate
  }
}

But this will:

data: function () {
  return {
    someRule: [
      v => !!v || 'Something is required',
      v => (v && this.someValidator(v)) || 'Something invalid',
    ]
  }
},
methods: {
  someValidator(value) {
    // validate
  }
}

Had me stumped for abit.. I prefer data: () => ({})