1

我有一个问题：我在一个对象
中有 4 个字段： , , . datacontact_idcontact_child_idaddress_id, address

当contact_idOR contact_child_idORaddress_id改变时，address更新。

问题
如果 I 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但输入字段不显示更改。

4

1 回答 1

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'
于 2020-04-24T13:44:57.877 回答