Estoy trabajando una aplicacion Laravel y Vue 3 composition API del tipo tenancy, el problema que estoy teniendo esta en algo basico pero que no me esta resultando, trato de rellenar la data en un select pero no me funciona.
La data me llega por medio del endpoint que tengo en el codigo de abajo, el cual pertenece al useVisit.js
import {reactive, toRefs, watch} from "vue"
import debounce from "lodash/debounce"
import pickBy from "lodash/pickBy"
import useAxios from "../../Tenant/useAxios"
import router from "../../../router/router"
import store from "../../../store/Tenant/store"
export default function (){
const tenant = localStorage.getItem('tenancy');
const state = reactive({
visits: {},
visit: {
id: "",
departamento_id: "",
nombre: "",
},
page: 1,
//Formularios de busqueda, aqui trabaja con los scope del backend
form: {
search: "",
status: "",
searchbyname: "",
}
});
//Función para traer los datos desde la API
const getVisits = async (event) => {
const endpoint = `${tenant}/api/visit/index`;
let query = pickBy(event)
query.page = state.page;
const request = await useAxios(
endpoint,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
params: query
}
);
const response = await request.sendRequest();
state.visits = await response;
}
//Funcion para rellenar los select
const apartments = async (event)=>{
const endpoint = `${tenant}/api/visit/apartment`;
let query = pickBy(event)
const request = await useAxios(
endpoint,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
params: query
}
);
const response = await request.sendRequest();
state.visits = await response;
};
//Función para eliminar el registro en base al ID
const deleteVisit = async (id) => {
const endpoint = `${tenant}/api/visit/delete/${id}`;
const data = {
_method: "DELETE"
}
const request = await useAxios(
endpoint,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
data,
}
);
const response = await request.sendRequest();
if (response) {
await store.commit("ui/SET_NOTIFICATION", response, { root: true });
await getVisits(state.form);
}
}
return { ...toRefs(state), getVisits, apartments, resetFilters, paginateVisits, createVisit, loadVisit, updateVisit, deleteVisit }
}
Un punto aparte a detallar, es que el proyecto lo parti con un curso base de vue 3 con composition api y laravel, y dentro de la construccion en el lado front de vue tengo los archivos separados en 3 partes.
Primero tengo un select que reutilizo en distintas partes del proyecto, es este precisamente
SelectOption.vue
<template>
<div class="rounded bg-gray-200">
<label class="" :for="name">
{{ label }}
</label>
<select :value="model" :id="name" class="bg-white rounded text-black h-7"/>
<div v-if="$store.state.form_errors[name]" class="text-red-500">
{{ $store.state.form_errors[name] }}
</div>
</div>
</template>
<script>
export default {
name: "SelectOption",
props: ["name", "model", "label"],
}
</script>
luego tengo a el componente Create.vue
<template>
<app-layout>
<template #default>
<main class="bg-white mx-auto p-8 my-4 rounded-lg shadow-2xl">
<section class="mt-4">
<visit-form
v-if="visit"
v-model:id="visit.id"
v-model:departamento_id="visit.departamento_id"
v-model:nombre="visit.nombre"
@fire="createVisit"
/>
</section>
</main>
</template>
</app-layout>
</template>
<script>
import useVisits from "../../../composables/Tenant/VisitRegistration/useVisit"
import AppLayout from "../../../layouts/Tenant/AppLayout.vue"
import VisitForm from "../../../components/Tenancy/VisitRegistration/VisitForm.vue"
export default {
name: "CreateVisit",
components: {VisitForm, AppLayout},
setup() {
const { visit, createVisit } = useVisits()
return { visit, createVisit }
}
}
</script>
y luego aqui llego a llamar el endpoint para rellenar mi select-option VisitForm.vue
<template>
<div class="space-y-6">
<form @submit.prevent="$emit('fire')">
<div class="bg-white shadow px-4 py-5 mt-4 sm:rounded-lg sm:p-6">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="" class="block text-sm font-medium text-gray-700">Departamento</label>
<select-option class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border border-gray-300 rounded-md">
<option value="">Selecciona una opción</option>
<option v-for="(numerodepto, id) in apartments" :key="id">
{{ numerodepto }}
</option>
</select-option>
</div>
<div class="col-span-6 sm:col-span-3">
<label for="nombre" class="block text-sm font-medium text-gray-700">Nombre</label>
<text-input name="nombre" :model="nombre" @input="$emit('update:nombreyapellido', $event.target.value)"
autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border border-gray-300 rounded-md" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
import TextInput from "../../UI/Tenant/TextInput";
import SelectOption from "../../UI/Tenant/SelectOption";
import useVisits from "../../../composables/Tenant/VisitRegistration/useVisit"
import { onMounted } from 'vue';
export default {
name: "VisitForm",
components: { TextInput, SelectOption },
props: {
departamento_id: {
type: Number,
},
nombre: {
type: String,
}
},
setup(){
const { apartments } = useVisits();
onMounted(() => {
apartments()
})
return {
apartments,
}
}
}
</script>
Perdon si comparto mucho codigo pero quiero ser lo mas especifico posible, por algun motivo no logro rellenar el select con los datos...