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

Question

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

这是我运行的代码

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

我做错了什么？

Answer 1

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>

Answer 2

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

Answer 3

尝试将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;
} ]
}
}
}