在 Vuetify 中寻找 link 两个 v-autocomplete 框的方法

Question

在上图中，我有两个 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 来确保我的后端调用没有问题。

Answer 1

我遇到过同样的问题，并且是这样解决的：

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

<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>

现在，当您 select names-autocomplete 中的一个值时，emails-autocomplete 将使用相同的值，反之亦然。组件之间的主要区别在于：它们显示不同的文本。正确设置后，您可以相应地使用@input 或@change 创建您的请求。请注意，这确实需要用户和电子邮件位于同一对象中。

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

我不确定这是否能解决您的问题，如果不能，请告诉我！

在 Vuetify 中寻找 link 两个 v-autocomplete 框的方法

Looking for a way to link two v-autocomplete boxes in Vuetify

vue.js

vuetify.js

v-autocomplete