使用Vuetify.js在代码中更新了v模型,但未在屏幕上更新

I have a problem:
I have 4 fields in a data object: contact_id, contact_child_id, address_id, address.

When contact_id OR contact_child_id OR address_id are changed, the address is updated.

Problem
If I console.log(data.address), it is updated but the input field displayed is not.

我需要能够手动更改地址,添加一些信息,所以我不能使用计算属性

模板:

    <v-autocomplete
                v-model="data.contact_id"
                :label="$tc('Contact')"
                :items="contact.items"
                :loading="contact.loading"
                :search-input.sync="contact.search"
                autofocus
                return-object
              ></v-autocomplete>

              <v-select
                v-model="data.contact_child_id"
                :items="child.items"
                :loading="child.loading"
                :placeholder="$tc('Contact')"
                return-object
                @change="updateAddress"
              >
                <template v-slot:item="data">
                  <template>
                    <v-list-item-content>
                      <v-list-item-title>{{data.item.name}}</v-list-item-title>
                      <v-list-item-subtitle>{{data.item.job}}</v-list-item-subtitle>
                    </v-list-item-content>
                  </template>
                </template>
              </v-select>

              <v-select
                v-model="data.address_id"
                :items="addressItems"
                :loading="addressLoading"
                return-object
                @change="updateAddress"
              >
                <template v-slot:item="data">
                  <template>
                    <v-list-item-content>
                      <v-list-item-title v-html="nl2br(formatAddress(data.item))"></v-list-item-title>
                    </v-list-item-content>
                  </template>
                </template>
              </v-select>
            </v-card-text>
            <v-card-text>
              <v-textarea
                v-model="data.address"
                auto-grow
                rows="1"
                :label="$tc('Address')"
              ></v-textarea>
            </v-card-text>

脚本

    function updateAddress() {
          data.value.address =
            (typeof data.value.contact_id == "object"
              ? data.value.contact_id.name
              : props.contactName) +
            (typeof data.value.contact_child_id == "object" &&
            data.value.contact_child_id.name
              ? "\n" + data.value.contact_child_id.name
              : "") +
            (typeof data.value.address_id == "object"
              ? "\n" + formatAddress(data.value.address_id)
              : "");
          console.log(data.value.address);
        }

The console.log(data.value.address) prints for example organization\ncontact name\naddress but the input field does not display the change.

评论