Vuetify - How to access data in form rule
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>
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;
}
}
],
'''
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;
} ]
}
}
}