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