Vue：如何使用axios将响应数据放入选择选项vue-search-select

问题描述

我是新手。我想使用vue-search-select在axios上的select选项上显示来自axios的响应数据，我已经尝试了几次，但是结果为nil。我尝试使用卡循环数据，数据显示成功。但是在这里我无法在选择选项上显示数据。

这是我的数据

结果如下所示：

这是我的选择选项代码：

<model-select :options="hospitals"
                    option-value="value"
                    option-text="text"
                    v-model="item"
                    placeholder="Choose Hospital">
</model-select>

这是我的脚本：

import axios from "axios"
import { ModelSelect } from 'vue-search-select'

export default {
    data() {
        return {
            hospitals:[],item : '',// options: [
            //     { value: '1',text: 'aa' + ' - ' + '1' },//     { value: '2',text: 'ab' + ' - ' + '2' },//     { value: '3',text: 'bc' + ' - ' + '3' },//     { value: '4',text: 'cd' + ' - ' + '4' },//     { value: '5',text: 'de' + ' - ' + '5' }
            // ],// item: {
            //     value: '',//     text: ''
            // },}
    },mounted() {
        this.getHospitals();
    },methods: {
        getHospitals() {
            axios
                .get('http://127.0.0.1:8000/my-endpoint')
                .then(response => {
                    this.hospitals = response.data.data
                })
                .catch(err => {
                    console.log(err)
                })
        }
    },components: {
      ModelSelect
    }
}

谢谢。

解决方法

<model-select :options="hospitals"
                    option-value="id"
                    option-text="hospital_name"
                    v-model="item"
                    placeholder="Choose Hospital">
</model-select>

您必须指定案例所需的值键和文本键。

,

改为使用模型列表选择

应该是

<model-list-select :list="hospitals"
                    option-value="id"
                    option-text="hospital_name"
                    v-model="item"
                    placeholder="Choose Hospital">
</model-list-select>

并像这样更新您导入的组件

import { ModelListSelect } from 'vue-search-select'