Estoy creando una tabla simple de vuetify que mostrará varios elementos de datos. El problema es que algunos de esos elementos se basan en relaciones y están anidados. Obtener los datos de nivel superior está bien, y si extraigo los datos anidados de forma independiente, también funciona bien.
Sin embargo, lo que quiero hacer es utilizar una matriz para evitar el código html repetitivo para la tabla. ¿Es esto posible en absoluto?
A continuación se muestra el código construido para la tabla en sí.
HTML:
<v-simple-table fixed-header height="300px"> <template v-slot:default> <thead> <tr> <th class="text-left"> Attribute </th> <th class="text-left"> Value </th> </tr> </thead> <tbody> <tr v-for="(serviceProperty, idx) in serviceProperties" :key="idx"> <th>{{ serviceProperty.label }}</th> <td>{{ service[serviceProperty.value] }}</td> </tr> </tbody> </template> </v-simple-table>JS:
export default { name: "Details", data() { return { loading: true, service: {}, serviceProperties: [ { label: 'Description', value: 'description' }, { label: 'Location', value: 'organization.locations[1].streetAddress' }, { label: 'EIN', value: 'organization.EIN' } ] }; }, props: ["serviceId"], async created() { this.service = await Vue.$serviceService.findOne(this.serviceId); this.loading = false; }, };Esto parece innecesariamente complicado.
Considere usar computado, como este
... computed: { mappedData() { return this.service.map(item => { Description: item.Description, Location: item.organization.locations[1].streetAddress, EIN: item.organization.EIN }) } } ...A continuación, puede acceder a los datos de la plantilla con:
... <element v-for="item in mappedData"> {{item.Description}} {{item.Location}} {{item.EIN}} </element> ...