v-модель обновляется в коде, но не на экране с помощью Vuetify.js

Question

У меня проблема:
у меня 4 поля вdata объект: contact_id, contact_child_id, address_id, address.

когда contact_id ИЛИ contact_child_id ИЛИ address_id изменены, address обновлено.

Проблема,
если яconsole.log(data.address), он обновляется, но отображаемое поле ввода - нет.

Мне нужно вручную изменить адрес, добавить некоторую информацию, поэтому я не могу использовать вычисленное свойство

Шаблон:

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

В console.log(data.value.address) печатает например organization\ncontact name\naddress но поле ввода не отображает изменения.

Answer 1

Вы столкнулись с проблемой реактивности, как упоминалось here, поэтому вам следует использовать context.set(data.value,'address',theValue):

setup(props,context){
...
 function updateAddress() {
          context.set(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);
        }

...
}

или разрушить контекст следующим образом:

setup(props,{$set, ...}){
...
 function updateAddress() {
         $set(data.value,'address'