寻找一种在 Vuetify 中链接两个 v-autocomplete 框的方法答案

【问题标题】：Looking for a way to link two v-autocomplete boxes in Vuetify寻找一种在 Vuetify 中链接两个 v-autocomplete 框的方法
【发布时间】：2021-02-05 21:39:53
【问题描述】：

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

【问题讨论】：

我不明白，一个名字可以有多封电子邮件？或者它是 oneToOne 关系，如果您选择一个或另一个，您希望电子邮件或人显示在第二个 v-autocomplete 中？还是您想进行搜索，然后两个自动完成功能同时向您显示可能的结果？
@Polybius 是的，它是一对一的关系。我从后端提取用户信息并将其划分为具有用户名的 allExternalUsers 和包含电子邮件的 allExternalUserEmails。我创建了一个代码笔，可以解释更多 codepen.io/aaronk488/pen/MWbKNOq?editors=1011

标签： vue.js vuetify.js v-autocomplete

【解决方案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>

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

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

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

【讨论】：