其他非空時需要 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的指令文件。