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

Question

im newbie here. I want to display response data from axios on the select option using vue-search-select, I have tried it several times but the results are nil. I have tried looping data using the card and the data is displayed successfully. but here I have trouble displaying data on the select option.

This is my data:

The result is as shown:

This is my select option code:

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

And this is my script:

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

Thanks.

Answer 1

use model-list-select instead

so it should be

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

and update your imported component like this

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