Skip to main content
se añadieron 2260 caracteres en el cuerpo
Origen Enlace
zacktagnan
  • 633
  • 2
  • 9
  • 33

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);
    }
    //...
}

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);
    }
    //...
}
Origen Enlace
zacktagnan
  • 633
  • 2
  • 9
  • 33

Error en la lectura de la propiedad demandada

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?