Untitled

<template>
    <div>
        <v-select 
        :opciones="opciones"
        v-model="selecion"
        @input="itemSeleccionado"
        />
            
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name : 'Select',
    props: {
        url:{
            type: String,
            required: true, // El valor es obligatorio
        }
    },
    data(){
        return{
            selecion: null,
            opciones: [], // aqui obtenemos las opciones de la url
        }
    },
    methods: {
        async obtenerOpciones(){
            console.log(this.selecion);
            try {
                const response = await axios.get('/paises'); // aqui obtenemos los datos de la url
                this.opciones = response.data; // aqui obtenemos los datos de la url
                //
                if (this.opciones.length > 0) {
                    this.selecion = this.opciones[0].id; // para selecuonar el primer pais
                    this.emit.itemSeleccionado(); // para emitir el evento del pirmer pais
                }
            } catch (error) {
                console.error('Ocurrio un error al cargar los paises ',error);
            }
        },
        itemSeleccionado(){
            this.$emit('itemSeleccionado', this.selecion); // para emitir el evento del pirmer pais
        },
        mounted() {
            this.obtenerOpciones(); // para obtener los datos de la url al montar el componente
        },
    }
}
</script>