2

Esto se efectúa en un proyecto con Laravel y Vuejs.

En la vista perteneciente al detalle de un registro del modelo User que se carga a través de Vuejs al que le llega los datos a través de Axios, uno de los datos a imprimir es uno que viene a través de la relación entre el modelo User y el modelo Department, de tal manera que quiero sacar el nombre del departamento (o la abreviatura del mismo) en el que está registrado el usuario consultado.

Al hacer la petición por Axios al método del controlador que recibe el ID del usuario a mostrar, como respuesta, se reciben todos los datos referidos al usuario así como los datos, por ejemplo, del departamento en el que está registrado el propio usuario (id, name, abbreviation,...); estos últimos se imprimen a través de la relación "department()" que existe en el modelo User con respecto al modelo Department.

El dato del nombre o abreviatura ("abbreviation" el nombre del campo en cuestión) viene al lado del número de la posición que ocupa la mesa asignada al usuario.

Entonces, para mostrar el dato del departamento y la posición de la mesa en el detalle del componente que carga los datos del usuario, empleo este DIV que contiene un SPAN junto a un INPUT:

<div class="input-group mb-3 col-sm-4">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroupPosicTable" v-text="objReg.department.abbreviation + '-'"></span>
    </div>
    <input v-model="objReg.position_table" type="text" class="form-control" name="position_table" placeholder="XX" aria-describedby="inputGroupPosicTable">
</div>

El conjunto crea algo como [ADM-|04].

Los datos se imprimen correctamente, pero, teniendo abierta la ventana de Herramientas del navegador, en su pestaña de Consola, se advierten dos 2 mensajes que es refieren al mismo error.

El mensaje de error es este:

[Vue warn]: Error in render: "TypeError: Cannot read property 'abbreviation' of undefined"

El error está referido a este pedazo del código v-text="objReg.department.abbreviation + '-'"dentro del SPAN.

Si inspecciono el conjunto de datos por el VuedevTools, se ve que todos los datos se reciben correctamente, incluso los referidos al departemento (también el de "abbreviation"). Vuelvo a mencionar que, a pesar de los mensajes de error, el dato se imprime en el lugar indicado.

Entonces, ¿a qué se debe estos mensajes de error y cómo solucionarlos?

En el mounted() del componente recibo el ID del registro de usuario a cargar emitido por el componente padre

    mounted() {
        console.log('Component mounted.');

        //Recibiendo evento(s) si emitido(s) (en este caso, desde su componente Padre)
        BusEvent.$on('fillProfEditFormEvent', (regID) => {
            this.fillEditFormReg(regID);
        });
    },

Este es el data del componente en que se declara la variable objReg que contendrá los valores del resultado de la consulta:

    data() {
        return {
            urlBase: '/api/admin/users',
            //...
            //variable para almacenar los datos del registro a mostrar
            objReg: {},
            //...
        }
    },

Y el método que recibe los datos del registro:

    methods: {
        fillEditFormReg(regID) {
            //Cargando datos del registro correspondiente
            //URL hacia la ruta de obtener datos del registro
            let url = this.urlBase + '/' + regID;
            axios.get(url)
            .then(response => {       //SI TODO OK
                this.objReg = response.data.user
            })
            .catch(error => {           //SI HAY ALGÚN ERROR
                console.log(error.response.data.errors);
            });
        },
    },

Este es el método "show()" del controlados UserController.php

public function show($id)
{
    $_arr_detalle = [];

    $user = User::withTrashed()->findOrFail($id);

    //...

    $_arr_detalle['user'] = $user;

    //...

    return $_arr_detalle;
}

Y este es el modelo [User.php]

class User extends Authenticatable
{
    protected $with = ['profile:id,name', 'department:id,name,abbreviation'];

    //...

    public function department() {
        return $this->belongsTo('App\Department');
    }
}

Y el modelo Department.php

class Department extends Model
{
    //...
    public function users() {
        return $this->hasMany(User::class);
    }
    //...
}
8
  • Podrias agregar el data? Que es objReg?
    – gbianchi
    Commented el 24 may. 2019 a las 13:32
  • 1
    Lo que pasa es que objReg.department no está definido al momento que Vue hace el render.
    – Shaz
    Commented el 24 may. 2019 a las 13:51
  • He añadido el data al contenido de la pregunta así como otros datos por si son de interés. @gbianchi.
    – zacktagnan
    Commented el 24 may. 2019 a las 14:53
  • 1
    En el evento create del componente crea un objeto vacio.. con sus propiedades vacias...
    – gbianchi
    Commented el 24 may. 2019 a las 14:57
  • 1
    Perfecto. Agrega una respesta completa a la pregunta si queres.
    – gbianchi
    Commented el 24 may. 2019 a las 15:29

1 respuesta 1

1

Bien, así queda todo tras seguir las pistas y recomendaciones de los que participaron.

Dentro del data() { return {} }, no solo defino el objeto objReg sino que inicializo a vacío todas las propiedades de las que va a disponer.

    data() {
        return {
            //...
            objReg: {
                'name': '',
                'lastname': '',
                'phone_int': '',
                'phone_ext': '',
                'position_table': '',
                'username': '',
                'email': '',
                'password': '',
                'password_confirmation': '',
                'department_id': '',
                'profile_id': '',
                'avatar': '',
                'received_comments_notif': '',
                'received_messages_notif': '',
                'notif_creation': '',
                //para la edición
                'id': '',
                //otro(s)
                'department_abbrev': '',
            },
        }
    }

Luego, en el método que es llamado dentro del mounted() (o dentro del created(), según se disponga de uno u otro), relleno cada una de las propiedades con el valor referido a ellas, es decir, cada una de las propiedades que voy a mostrar en el detalle del registro, incluida la referida al nombre o abreviatura del departamento al que pertenece el usuario.

        fillEditFormReg(regID) {
            let url = this.urlBase + '/' + regID;
            axios.get(url)
            .then(response => {       //SI TODO OK
                //...
                this.objReg = {
                    'name': response.data.user.name,
                    'lastname': response.data.user.lastname,
                    'phone_int': response.data.user.phone_int,
                    'phone_ext': response.data.user.phone_ext,
                    'position_table': response.data.user.position_table,
                    'username': response.data.user.username,
                    'email': response.data.user.email,
                    'department_id': response.data.user.department_id,
                    'profile_id': response.data.user.profile_id,
                    'avatar': response.data.user.avatar,
                    'received_comments_notif': response.data.user.received_comments_notif,
                    'received_messages_notif': response.data.user.received_messages_notif,
                    'notif_creation': response.data.user.notif_creation,
                    //para la edición
                    'id': response.data.user.id,
                    //otro(s)
                    'department_abbrev': response.data.user.department.abbreviation,
                };
            })
            .catch(error => {           //SI HAY ALGÚN ERROR
                console.log(error.response.data.errors);
            });
        },

Finalmente, ahora, dentro del SPAN en el que quiero mostrar el dato, pongo esto:

<span class="text-uppercase input-group-text" id="inputGroupPosicTable" v-text="objReg.department_abbrev + '-'"></span>

Eso es todo.



[ EDITADA ]

Bueno, según la última recomendación recibida, se podría resumir la carga del objeto objReg a la hora que recibe los datos de respuesta de la siguiente manera:

    fillEditFormReg(regID) {
        let url = this.urlBase + '/' + regID;
        axios.get(url)
        .then(response => {       //SI TODO OK
            //...
            this.objReg = response.data.user
            //Añadiendo propiedad extra al objeto...
            this.$set(this.objReg, 'department_abbrev', response.data.user.department.abbreviation)
        })
        .catch(error => {           //SI HAY ALGÚN ERROR
            console.log(error.response.data.errors);
        });
    },
3
  • Si queres evitar pasar todas las propiedades una por una, Object.Set es una solucion ;)
    – gbianchi
    Commented el 24 may. 2019 a las 17:52
  • @gbianchi, ¿puedes poner un ejemplo de ese Òbject.Set por favor?
    – zacktagnan
    Commented el 24 may. 2019 a las 18:17
  • Perdon no era Object.set era Object.assing o Vue.set.. lee el enlace en la documentacion de VUE
    – gbianchi
    Commented el 24 may. 2019 a las 18:19

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.