0

在此处输入图像描述

在上图中，我有两个 v-autocomplete 框，一个用于名称，另一个用于电子邮件。有没有办法连接两个 v-autocomplete 框，当用户输入姓名或电子邮件信息时，它还会显示另一个框的选项。

在图像中的示例中，用户输入了名称并获得了结果，我将如何显示该名称的相应电子邮件？

这是两个 v-autocomplete 框的代码

  <v-autocomplete
          v-model="item.userId"
          :items="allExternalUsers"
          :search-input.sync="searchUser"
          label="Name"
          name="name"
          item-value="id"
          item-text="name"
          filled
          dense
          hide-details
          clearable
          autocomplete="off"
          @input="updateSelection"
          @change="triggerChange"
        ></v-autocomplete>
  <v-autocomplete
      v-model="item.email"
      :items="allExternalUserEmails"
      v-validate="'required|email'"
      :error-messages="veeErrors.collect(`${item.id}_email`)"
      :search-input.sync="searchEmail"
      label="Email"
      name="email"
      item-value="id"
      item-text="email"
      filled
      dense
      hide-details
      clearable
      autocomplete="off"
  ></v-autocomplete>

这是我的手表代码

 watch: {
    searchUser(prefix){
      if(prefix && prefix.length > 2){
         this.serviceInstance.userService
        .getExternalUsers(prefix)
        .then(({data}) => {
          this.allExternalUsers = data.externalUser.map(element => `${element.firstName} ${element.lastName}`);
          this.allExternalUserEmails = data.externalUser.map(element => element.email);
          this.over10Results = data.over10Results;
        }).catch(error => console.log(error));
      }else{
        // this.allExternalUsers = [];
        // this.clearExternalUsers();
      }
    },
    searchEmail(prefix){
      if(prefix && prefix.length > 2){
         this.serviceInstance.userService
        .getExternalUsers(prefix)
        .then(({data}) => {
       this.allExternalUsers = data.externalUser.map(element => `${element.firstName} ${element.lastName}`);
          this.allExternalUserEmails = data.externalUser.map(element => element.email);
          this.over10Results = data.over10Results;
        }).catch(error => console.log(error));
      }else{
        this.allExternalUserEmails = [];
        // this.clearExternalUsers();
      }
    },

这是我的后端调用

async getExternalUsers(prefix) {
    const url = `/api/v1/external_user/prefix/${prefix}`;
    const method = "GET";
    return this.vue.$http.request({ method, url }).then(response => {
      return response;
    }).catch(error => console.log(error));
  }

我使用 Postman 来确保我的后端调用没有问题。

4

1 回答 1

2

我遇到了同样的问题并像这样解决了它：

我使用 1 个道具同步到，并定义了文本应该是什么，值应该是什么：

<v-row>
  <v-col>
    <v-autocomplete
      label="name"
      v-model="autoCompleteInput" <--- syncs to the same prop
      :items="items" <--- uses the same items
      item-text="name" <--- but this one should show a name
      :item-value="(item) => item" <--- return whatever you like (in this case the whole object)
      clearable
    >
    </v-autocomplete>
  </v-col>
  <v-col>
      <v-autocomplete
        label="email"
        v-model="autoCompleteInput" <--- syncs to the same prop
        :items="items" <--- uses the same items
        item-text="email" <--- and this one should show the email
        :item-value="(item) => item" <--- return whatever you like (in this case the whole object)
        clearable
      >
    </v-autocomplete>
  </v-col>
</v-row>

现在会发生什么，当您在名称自动完成中选择一个值时，电子邮件自动完成将使用相同的值，反之亦然。虽然组件之间的主要区别是：它们显示不同的文本。正确设置后，您可以使用 @input 或 @change 相应地创建您的请求。请注意，这确实要求用户和电子邮件位于同一对象中。

我为您创建了一个沙箱，以便您可以看到它的实际效果： https ://codesandbox.io/s/vue-vuetify-sync-select-or-autocomplete-jjhbk?file=/src/App.vue

我不确定这是否能解决你的问题，如果不让我知道！

于 2021-02-12T08:45:16.813 回答