vue2 select远程搜索数据回显

在vue2 select中进行远程搜索数据回显，需要使用v-model来实现数据的双向绑定。

首先，在vue组件的data中定义一个数组来存储选中的数据：

data() {
  return {
    selectedData: []
  }
}

然后，在vue2 select中使用v-model绑定该数组：

<template>
  <v-select v-model="selectedData" :items="items" :search-input.sync="search" label="name" item-value="id" item-text="name" :loading="loading" @search="searchData"></v-select>
</template>

在上面的代码中，items表示从远程获取的数据，search表示搜索关键字，loading表示数据是否正在加载。@search是vue2 select的一个事件，可以在搜索框输入内容时触发，我们可以在这里进行远程搜索。

最后，在searchData方法中，我们可以通过远程接口获取数据，并将已选中的数据回显到vue2 select中：

methods: {
  async searchData() {
    this.loading = true;
    // 调用远程接口获取数据
    const res = await axios.get(`/api/search?keyword=${this.search}`);
    this.items = res.data;
    this.loading = false;
    // 将已选中的数据回显到vue2 select中
    this.selectedData.forEach((item) => {
      const index = this.items.findIndex((i) => i.id === item.id);
      if (index !== -1) {
        this.$set(this.items[index], 'selected', true);
      }
    });
  }
}

在上面的代码中，我们首先调用远程接口获取数据，并将数据存储到items数组中。然后，遍历已选中的数据，通过findIndex方法找到对应的数据在items数组中的索引，然后使用$set方法将selected属性设置为true，从而实现回显。

完整的代码示例：

<template>
  <v-select v-model="selectedData" :items="items" :search-input.sync="search" label="name" item-value="id" item-text="name" :loading="loading" @search="searchData"></v-select>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      search: '',
      loading: false,
      selectedData: []
    }
  },
  methods: {
    async searchData() {
      this.loading = true;
      // 调用远程接口获取数据
      const res = await axios.get(`/api/search?keyword=${this.search}`);
      this.items = res.data;
      this.loading = false;
      // 将已选中的数据回显到vue2 select中
      this.selectedData.forEach((item) => {
        const index = this.items.findIndex((i) => i.id === item.id);
        if (index !== -1) {
          this.$set(this.items[index], 'selected', true);
        }
      });
    }
  }
}
</script>