Vue input required if others are non-empty

Question

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). But I don't see that happening. Any idea what I'm doing wrong?

Answer 1

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

Answer 2

The styling is done through vuetify rules , and not the required directive. For each v-text-field , you can use the same rule if you want. Example code pen .

required directive documentation .