其他非空时需要 Vue 输入

Question

我有一个收集地址的表格。 完全指定的地址可以，完全空的也可以，但部分地址是不行的。

我试图这样表达：

<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
}

我可以看到该方法被调用，并且当我向输入添加和删除字符时，我可以看到总长度发生变化，但是当totalLength达到 0 时，我希望字段按照需要设置样式（如果它们为空）。 但我不认为会发生这种情况。 知道我做错了什么吗？

Answer 1

这是因为如果您希望在更新某个变量时动态更改值，则方法reqIn在开始时调用一次，您可以使用computed properties ： https ://v2.vuejs.org/v2/guide/ computed.html#Basic-示例

Answer 2

样式是通过vuetify 规则完成的，而不是required的指令。 对于每个v-text-field ，您可以根据需要使用相同的规则。 示例代码笔。

required的指令文件。