<template>
    <MDBSelect v-model:options="options1" v-model:selected="selected1" filter/>
    <p>selected: {{ selectedText }}</p>
</template>

<script>
import {MDBSelect} from "mdb-vue-ui-kit";

export default {
    components: {
        MDBSelect
    },
    props: {
        dataUrl: String
    },
    data() {
        return {
            selected1: false,
            options1: [{text: 'wait...', value: 0, selected: true}],
        }
    },
    mounted() {
        let that = this;
        fetch(this.dataUrl)
            .then(response => response.json())
            .then(function (data) {
                 that.options1 = data;
            });
    },
    computed: {
        selectedText() {
            if(this.selected1 == 0)
                return;

            let that = this;

            return this.options1.filter(option => {
                return option.value == that.selected1;
            })[0].text;
        }
    }
};
</script>