Vuetify - How to access data in form rule
19,108
Solution 1
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>
Solution 2
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;
} ]
}
}
}
Solution 3
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;
}
}
],
'''
Author by
ToddT
Updated on June 24, 2022Comments
-
ToddT almost 2 years
Can I access a data element in a
rule
?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?