0

Estoy trabajando en un formulario donde cargo un select que me funciona sin problemas, pero he agregado 2 nuevos select sigueindo la misma logica, pero estos no me estan funcionando... algo me estoy saltando que no me deja cargar los demas, o bien, hay que configurar de una forma distinta, les comparto mi codigo a ver si se entiende y en realidad estoy pasandome algo por alto.

trabajando con compositio api.

useProofIncome.js

import {reactive, toRefs } from "vue"
import pickBy from "lodash/pickBy"
import useAxios from "../../useAxios"

export default function (){
    const tenant = localStorage.getItem('tenancy');
    const state = reactive({
        proofincomes: {},
        paymenttypes: {},
        banks: {},
        proofincome: {
            id: "",
            departamento_id: "",
            formapago: "",
            descripcion: "",
            banco: "",
        }
    });

    //Función para traer los datos desde la API de Clientes
    const getProofIncome = async (event) => {
        const endpoint = `${tenant}/api/proofincome/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.proofincomes = await response;
    }

    //Funcion para rellenar los select    
    const apartments = async (event)=>{
        const endpoint = `${tenant}/api/proofincome/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.proofincomes = await response;
    };

    //Funcion para rellenar los select de Payment Types
    const paymenttypes = async (event)=>{
        const endpoint = `${tenant}/api/parameters/paymenttypes`;
        let query = pickBy(event)

        const request = await useAxios(
            endpoint,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
                params: query
            }
        );
        const response = await request.sendRequest();
        state.paymenttypes = await response;
    };

    //Funcion para rellenar los select de banks
    const banks = async (event)=>{
        const endpoint = `${tenant}/api/parameters/banks`;
        let query = pickBy(event)

        const request = await useAxios(
            endpoint,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
                params: query
            }
        );
        const response = await request.sendRequest();
        state.banks = await response;
    };

    return { ...toRefs(state), apartments, banks, paymenttypes, getProofIncome }
}

Hasta aqui las 3 funciones, apartments, paymenttypes y banks traen bien los datos desde el backend, es decir, los datos llegan bien, sin problemas.

Luego tengo el componente donde cargo el formulario con los select, aca el select de apartments me funciona perfecto, los otros 2 no me cargan el contenido en los select

<template>
    <div class="space-y-6">
    <form @submit.prevent="$emit('fire')">
        <div class="bg-white dark:bg-slate-600 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 dark:text-gray-200 text-gray-700">Departamento</label>
                        <select :value="departamento_id" @change="$emit('update:departamento_id', $event.target.value)" autocomplete="given-name" class="mt-1 focus:ring-indigo-500">
                            <option value="">Selecciona un departamento</option>
                                <option v-for="(numerodepto, id) in proofincomes" :key="id" :value="id">
                                {{ numerodepto }}
                                </option>
                        </select>
                    </div>                                      

                    <div class="col-span-6 sm:col-span-4 lg:col-span-3">
                        <label for="" class="block text-sm font-medium dark:text-gray-200 text-gray-700">Forma de pago</label>
                        <select :value="formapago" @change="$emit('update:formapago', $event.target.value)" autocomplete="given-name" class="mt-1 focus:ring-indigo-500">
                            <option value="">Selecciona un tipo de pago</option>
                                <option v-for="(name, id) in paymenttypes" :key="id" :value="id">
                                {{ name }}
                                </option>
                        </select>
                    </div>

                    <div class="col-span-6 sm:col-span-3">
                        <label for="" class="block text-sm font-medium dark:text-gray-200 text-gray-700">Banco</label>
                        <select :value="banco" @change="$emit('update:banco', $event.target.value)" autocomplete="given-name" class="mt-1 focus:ring-indigo-500">
                            <option value="">Selecciona un banco</option>
                                <option v-for="(name, id) in banks" :key="id" :value="id">
                                {{ name }}
                                </option>
                        </select>
                    </div>                    
                </div>
                
            </div>
            </div>
        </div>       

        <div class="flex justify-end my-4">
            <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md">
            Cancelar
            </button>
            <submit-button :text="textButton" type="submit" class="ml-3 inline-flex justify-center py-2 px-4" />
        </div>
    </form>
    </div>

</template>

<script>   
    import SubmitButton from "../../UI/Tenant/SubmitButton";
    import useProofIncome from "../../../composables/Tenant/ProofIncome/useProofIncome";
    import { onMounted } from 'vue';

    export default {
        name: "ProofIncomeForm",
        components: {SubmitButton  },
        props: {
            textButton: {
                type: String,
                default: "Crear Registro",
            },
            copropietario_id: {
                type: Number,
            },            
            formapago: {
                type: String,
            },            
            banco: {
                type: String,
            },    
        },
        
        setup(){
            
            const { apartments, banks, paymenttypes, proofincomes } = useProofIncome();
            onMounted(() => {
                apartments(),
                paymenttypes(),
                banks()
            });

            return{
                apartments,
                banks,
                paymenttypes,
                proofincomes
            }
        }
    }
</script>

Aqui tengo la informacion proveniente del llamado a la api en el backend

introducir la descripción de la imagen aquí

No logro entender que puede estar faltandome aqui...

1 respuesta 1

1

He detectado dos cosas:

  1. en la función apartaments() estás seteando state.proofincomes
  2. el return {... toRefs(state), apartaments, ...}

Aquí, apartaments (función) está sobreescribiendo al apartaments del state durante el return

Recomiendo cambiar el nombre de sus funciones para no chocar con las del state

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.