0

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...

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

6
  • veo que por consola muestras que apartaments te devuelve los items que esperas. pero dime en que parte del codigo usaste el console.log para mostrar esos datos. Commented el 23 abr. 2022 a las 22:07
  • tambien parece que hace falta el codigo de useVisits Commented el 23 abr. 2022 a las 22:11
  • Amigo gracias por los comentarios, mira agregue una imagen para detallar, la parte de la data, viene del network mas que nada, no es un console.log como tal, agregue una nueva imagen para detallar... y ahora no entiendo donde me habra faltado el useVisits, detallo tambien que aca tengo 3 archivos Vue por separados 1 el SelectOption.vue, 2 el Create.vue y 3 el VisitForm.vue Commented el 23 abr. 2022 a las 23:45
  • disculpa no me exprese bien. me referia a que agreges el codigo de useVisits. completo si es posible Commented el 24 abr. 2022 a las 0:17
  • a simple vista me doy cuenta que apartaments es una funcion. que agrega su respuesta a state.visits pero no entiendo porque en tu v-for estas haciendo referencia a apartaments(que es una funcion ) y no a state.visits Commented el 24 abr. 2022 a las 0:20

2 respuestas 2

2

Toma en cuenta lo siguiente:

  1. en el v-for estas llamando a apartaments el cual no es un objeto es una funcion.

  2. la función apartaments no esta retornando ningun valor a pesar de que si esta creando los apartamentos, pero se agregan a la variable state.visits y state se retorna junto con useVisits

Siguiendo la estructura de tu app. te recomiendo intentar con esto:

El setup de VisitForm

setup(){  
                
        const { apartments, visits } = useVisits();
        onMounted(() => {
            apartments()
        })
        return {
            visits,                
        }
    }

y luego en el v-for

 <option v-for="(numerodepto, id) in visits" :key="id">
   {{ numerodepto }}
 </option>
2
  • Si amigo, funciono perfecto, me relleno los datos correctamente, voy a tratar de entender mas bien como funciona esta parte, el tema del uso de state me enreda un poquito ciertamente, necesito estudiarlo mas, muchas gracias por la explicacion que tambien me has dado amigo, me sirve para poder entender aun mas... Commented el 24 abr. 2022 a las 4:41
  • 1
    me alegra haberte ayudado. Commented el 24 abr. 2022 a las 4:49
0

Agrego a la respuesta de Alejandro, que fue la solucion correcta a mi problema una duda mas que tenia, era como pasarle el valor al select y guardarlo en la base de datos, mi solucion fue simplemente agregar el codigo en mi option

quedando asi finalmente esta parte:

<select class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border border-gray-300 h-7 rounded-md">
    <option value="">Selecciona una opción</option>
    <option v-for="(numerodepto, id) in visits" :key="id" :value="id" :model="departamento_id" @input="$emit('update:departamento_id', $event.target.value)">
        {{ numerodepto }}
    </option>
</select>

Muchas gracias nuevamente a alejandro...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.