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

Question

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

这是我的数据：

结果如图：

这是我的选择选项代码：

<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
    }
}

谢谢。

Answer 1

改用 model-list-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'

Answer 2

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

你必须指定你需要的值键和文本键。