Vue：如何使用 axios 将响应数据获取到 select 选项（vue-search-select）

Question

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

这是我的数据：

结果如图：

这是我的 select 选项代码：

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

您必须根据您的情况指定所需的值键和文本键。

Answer 2

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

Vue：如何使用 axios 将响应数据获取到 select 选项（vue-search-select）

Vue : How to getting response data into select option (vue-search-select) with axios

vue.js

bootstrap-4

axios

vue-cli