I missed the integrantes.value = res.data; on the response. noob mistake.
Dependent / Cascade Dropdown using Vue3 + Vuetify (composition API) and Axios
Hi I'm tying to create simple dependent dropdown using Vue3 + Vuetify using Axios but when response arrives rerender of the v-select component is not happening.
Some explanation on the expected behavior: The first dropdown renders a list of soccer matches (partidos) which are passed from the controller thru IntertiaJS.
Once the match is selectd it should fetch a list of people which can request an entrance to that match and are showed on the second dropdown to be selected and submited.
The response looks good on the console.log but the 2nd dropdown is not being populated, even the isLoading ref is not updating in the v-select component.
Can anyome help with this? what I'm missing?
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import { useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
import axios from 'axios';
const props = defineProps({
partidos: Object
});
let integrantes = ref([]);
let isLoading = ref(false);
const form = useForm({
partido: '',
integrante: '',
});
function fetchIntegrantes(e){
isLoading = true;
axios
.get(window.location.origin+'/entradas/fetchIntegrantes/'+e)
.then(res => {
integrantes = res.data;
isLoading = false;
console.dir(res.data)
})
.catch((err) => {
console.log(err);
});
}
</script>
<template>
<AuthenticatedLayout>
<div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
<v-col>
<v-form @submit.prevent="form.post(route('entradas.store'))">
<v-select
v-model="form.partido"
label="Partido"
:items="props.partidos"
:item-title="partido => partido == '' ? '' : `EDLP vs. ${partido.rival.nombre} (${partido.fecha})`"
item-value="id"
@update:modelValue="fetchIntegrantes"
/>
<v-select
v-model="form.integrante"
label="Integrante"
:items="integrantes"
:item-title="integrante => integrante == '' ? '' : `${integrante.nombre} ${integrante.apellido}`"
item-value="id"
:loading="isLoading"
/>
<PrimaryButton class="mt-4">Solicitar</PrimaryButton>
</v-form>
</v-col>
</div>
</AuthenticatedLayout>
</template>
Please or to participate in this conversation.