其他非空时需要 Vue 输入答案

【问题标题】：Vue input required if others are non-empty其他非空时需要 Vue 输入
【发布时间】：2019-03-04 21:27:08
【问题描述】：

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

我试图这样表达：

<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 时，我希望这些字段按照需要设置样式（如果它们是空的）。但我不认为会发生这种情况。知道我做错了什么吗？

【问题讨论】：

这里多了一个= =>
谢谢@Shim-Sao。只是复制粘贴错误。表单解析。
请注意，required 属性自 v1.0 起没有任何功能：stackoverflow.com/a/52935829/1981247

标签： javascript vue.js vuetify.js

【解决方案1】：

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

required 指令documentation。

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢，但我看到方法被调用，并且每次输入更改时总长度都在变化。另外，我认为你已经把它弄反了：计算属性更容易被缓存，然后不再被调用。