v-model 在代码中更新但不在屏幕上使用 Vuetify.js

Question

我有一个问题：
我在 data 对象中有 4 个字段：contact_id、contact_child_id、address_id, address。

当contact_id OR contact_child_id OR 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'

v-model 在代码中更新但不在屏幕上使用 Vuetify.js

v-model updated in code but not on screen using Vuetify.js

javascript

vue.js

vuetify.js

vuejs3

vue-composition-api