在vue页面中select选中数据回显代码

假设你有一个下拉框(select)和一个数据对象(data)，选项的值(value)是选项文本(text)的对应项。你可以使用 `v-model` 指令来绑定数据对象中的选项值，并且使用 `v-bind` 指令将选中的选项值绑定到下拉框中。

HTML 代码：

<select v-model="selectedOption">
  <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>

Vue.js 实例：

new Vue({
  el: '#app',
  data: {
    selectedOption: '', // 选中的选项值
    options: [ // 下拉框选项
      { text: '选项1', value: '1' },
      { text: '选项2', value: '2' },
      { text: '选项3', value: '3' }
    ]
  }
});

在这个例子中，当你选择下拉框中的一个选项时，`selectedOption` 数据对象会被自动更新，所以你可以在 Vue.js 实例中使用 `selectedOption` 来获取选中的选项值，然后在需要回显的地方使用它。

相关问题

vue根据后台返回值选中select回显

假设后台返回的数据格式如下：

{
  id: 1,
  name: '张三',
  gender: 'male'
}

如果要根据后台返回的 gender 值来选中 select，可以将 select 的 v-model 绑定到 gender 上，然后在获取到后台返回值后，将 gender 的值赋给 v-model。

例如：

<template>
  <div>
    <label for="gender">性别：</label>
    <select id="gender" v-model="gender">
      <option value="">请选择</option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    }
  },
  mounted() {
    // 假设后台返回的数据为 response
    const response = {
      id: 1,
      name: '张三',
      gender: 'male'
    }
    // 将后台返回的 gender 值赋给 v-model
    this.gender = response.gender
  }
}
</script>

这样，当页面加载完成时，select 就会自动选中男这个选项。

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>