vue.js - el-select在同时使用allow-create和remote-method时，复制一个值到select输入框中，列表中为什么会同时出现两个一模一样的值？

Question

    <el-select      v-model="addTraceForm.advisor"      clearable      @change="advisorChange"      maxlength="250"      filterable      allow-create      remote      :remote-method="(qs:any)=>{return remoteMethod(qs)}"    >      <el-option        v-for="item in advisor_list"        :key="item.advisor"        :label="item.advisor"        :value="item.advisor"      />    </el-select>

上述代码，复制一个值到select输入框中，然后在remoteMethod，模糊搜索到该数据，为什么allow-create创建的数据没有被清除掉，导致列表中出现两条一模一样的数据

Answer 1

这个问题可能是由于allow-create和remote-method两个选项的使用方式引起的。

allow-create选项允许用户在选择框中输入未在列表中出现的值，然后你可以通过remote-method远程方法来搜索这个值并添加到列表中。然而，如果用户输入的值已经在列表中存在，allow-create不会做任何事情，也就是说，它不会自动将这个值添加到列表中。

在你的代码中，你提到复制一个值到选择框中，然后在remoteMethod中模糊搜索到该数据。如果这个复制的值已经在advisor_list列表中存在，那么它将会在列表中出现两次，因为allow-create不会自动添加这个值。

一个可能的解决方案是检查在复制值之后，是否已经在列表中存在，如果存在，就清除掉。你可以在advisorChange事件处理器中做这个检查。

以下是一个可能的实现：

methods: {  advisorChange(value) {    let item = this.advisor_list.find(item => item.advisor === value);    if (item) {      // 如果找到匹配的项，清除选择的值      this.$refs.select.clear();    } else {      // 否则，执行远程方法来搜索值并添加到列表中      this.remoteMethod(value);    }  }}

在这个代码中，我们首先检查在复制的值是否已经在列表中存在。如果存在，我们就清除选择的值。否则，我们就执行远程方法来搜索值并添加到列表中。