Tengo una tabla de datos que usa Vuetify que pasa un accesorio localAuthority desde un backend de Rails. Todo funciona muy bien hasta que paso una asociación de niños vacía (atributo anidado). En este caso 'condado':
<script> import axios from "axios"; export default { name: 'LocalAuthorityIndex', props: { localAuthorities: {type: Array, default: () => []}, counties: {type: Array, default: () => []}, localAuthorityTypes: {type: Array, default: () => []} }, data() { return{ search: '', dialog: false, testmh: 'hello', dialogDelete: false, headers: [ { text: 'Name', align: 'start', value: 'name' }, { text: 'ONS Code', value: 'ons_code' }, { text: 'ID', value: 'id' }, { text: 'Population', value: 'population' }, { text: 'county', value: 'county.name' }, { text: 'Website', value: 'website' }, { text: 'Actions', value: 'actions', sortable: false }, ],Entonces, en el ejemplo anterior, funciona siempre que todos los registros tengan una asociación de condado (pertenece a). Sin embargo, si un registro no tiene un 'condado' asociado, aparece el siguiente error:
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')"He intentado muchas cosas como agregar una declaración condicional como la siguiente:
{ text: 'county', value: ('county.name' ? 'county.name' : nil )},Pero nada parece funcionar.
De acuerdo con su código <v-data-table> en Codepen, veo que está anulando las ranuras de elementos de tabla predeterminadas con las suyas.
Tu error proviene de esta parte del código:
... <template #item.county.name="{ item }"> <a :href="'/counties/' + item.county_id"> {{ item.county.name }} </a> </template> ... Echa un vistazo a la primera cuerda. #item.county.name es una forma abreviada de v-slot:item.county.name y proviene de una de sus cadenas en la matriz de headers :
... { text: 'county', value: 'county.name' },Por lo tanto, no hay ningún error, esta parte es analizada correctamente por la biblioteca vuetify incluso cuando su elemento no contendrá ningún condado .
El error está en la tercera cadena del código anterior. Está intentando imprimir el nombre del condado sin verificar su existencia. Es por eso que está recibiendo el error ...Cannot read properties of undefined... .
Supongo que puedes solucionar tu problema de esta manera:
<template #item.county.name="{ item }"> <a :href="'/counties/' + item.county_id"> {{ item.county ? item.county.name : 'No name' }} </a> </template> Por supuesto, si necesita ocultar su enlace a los condados en este caso, también puede agregar v-if (o v-show ) en a etiqueta.
También creé un pequeño Codepen con algunos datos estáticos. Eche un vistazo a la ranura item.name.text en este patio de recreo, tal vez lo ayude a comprender asociaciones de objetos similares.