I am working on a Laravel and Vue 3 composition API application of the tenancy type, the problem I am having is in something basic but it is not working for me, I try to fill the data in a select but it does not work for me.
The data reaches me through the endpoint that I have in the code below, which belongs to 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 }
}
A separate point to detail is that the project was divided with a base course of vue 3 with composition api and laravel, and within the construction on the front side of vue I have the files separated into 3 parts.
First I have a select that I reuse in different parts of the project, it is precisely this
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>
then I have a Create.vue component
<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>
and then here I get to call the endpoint to fill my 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>
Sorry if I share a lot of code but I want to be as specific as possible, for some reason I can't fill the select with the data...
Take into account the following:
in it
v-for
you are callingapartaments
which is not an object it is a function.the function
apartaments
is not returning any value even though it is creating the apartments, but they are added to the variablestate.visits
andstate
returned together withuseVisits
Following the structure of your app. I recommend you try this:
The VisitForm setup
and then in the v-for
I add to Alejandro's answer, which was the correct solution to my problem, one more doubt I had, it was how to pass the value to the select and save it in the database, my solution was simply to add the code in my option
leaving this part finally:
Many thanks again to Alejandro...