[英]Vue input required if others are non-empty
I have a form collecting an address.我有一个收集地址的表格。 A fully specified address is okay, a completely empty one is okay, too, but a partial address is not okay.
完全指定的地址可以,完全空的也可以,但部分地址是不行的。
I'm trying to express that this way:我试图这样表达:
<v-text-field :required="reqIn(address)" v-model="address.street" label="Street"></v-text-field>
<v-text-field :required="reqIn(address)" v-model="address.city" label="City"></v-text-field>
<v-text-field :required="reqIn(address)" v-model="address.state" label="State"></v-text-field>
// methods
reqIn (address) {
// addresses may be all blank, or fully specified
let totalLength = address.street.length + address.city.length + address.state.length + address.zip.length
console.log(totalLength)
return totalLength === 0
}
I can see the method getting called, and I can see the total length changing as I add and delete chars to the inputs, but when totalLength
reaches 0, I expect the fields to become styled as required (if they are empty).我可以看到该方法被调用,并且当我向输入添加和删除字符时,我可以看到总长度发生变化,但是当
totalLength
达到 0 时,我希望字段按照需要设置样式(如果它们为空)。 But I don't see that happening.但我不认为会发生这种情况。 Any idea what I'm doing wrong?
知道我做错了什么吗?
这是因为如果您希望在更新某个变量时动态更改值,则方法reqIn
在开始时调用一次,您可以使用computed properties
: https ://v2.vuejs.org/v2/guide/ computed.html#Basic-示例
The styling is done through vuetify rules , and not the required
directive.样式是通过vuetify 规则完成的,而不是
required
的指令。 For each v-text-field
, you can use the same rule if you want.对于每个
v-text-field
,您可以根据需要使用相同的规则。 Example code pen .示例代码笔。
required
directive documentation . required
的指令文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.