Quiero mostrar dinámicamente los datos en la lista según la tecla que seleccione. La lista de elementos puede tener varias claves. Quiero elegir dinámicamente los datos que quiero mostrar en la lista sin codificar la clave real.
<template> <v-card class="mx-auto" max-width="500" > <v-list> <v-list-item-group v-model="model"> <v-list-item v-for="(item, i) in items" :key="i" > <v-list-item-icon> <v-icon v-text="item.icon"></v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.data_to_display"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </template> <script> export default { data: () => ({ data_to_display: 'name', // or data_to_display: 'text' items: [ { age: 34, name: 'abc', marks: null }, { age: 12, name: '', marks: 60 }, { age: '20, name: 'lmn', marks: 70 }, ], model: 1, }), } </script>La lista anterior de elementos tiene varias claves. Quiero mostrar el nombre, la edad o las marcas de cualquiera de ellos según la clave que elija del guión.
Como @Sami comentó, puede usar la clave para mostrar datos, y en la propiedad calculada, filtre solo los que tengan valores:
new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { data_to_display: 'name', items: [{age: 34, name: 'abc', marks: null}, {age: 12, name: '', marks: 60}, {age: 20, name: 'lmn', marks: 70 },], model: 1, } }, computed: { filteredItems() { return this.items.filter(i => i[this.data_to_display] ) } } }) <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <v-card class="mx-auto" max-width="500" > <v-list> <v-list-item-group v-model="model"> <v-list-item v-for="(item, i) in filteredItems" :key="i" > <v-list-item-icon> <v-icon v-text="item.icon"></v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item[data_to_display]"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>Convertir v-text="item.data_to_display" a v-text="item[data_to_display]" resolverá el problema.
Debe usar brackets si el nombre de la propiedad tiene caracteres especiales. La notación entre paréntesis puede ser muy útil si desea buscar los valores de una propiedad de forma dinámica.
Como en uno de los objetos que tiene un valor vacío para la propiedad de name , se muestra en blanco.
Demostración de trabajo:
new Vue({ el: "#app", vuetify: new Vuetify(), data: { data_to_display: 'name', model: 1, items: [{ age: 34, name: 'abc', marks: null }, { age: 12, name: '', marks: 60 }, { age: '20', name: 'lmn', marks: 70 }] } }) <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <v-card class="mx-auto" max-width="500" > <v-list> <v-list-item-group v-model="model"> <v-list-item v-for="(item, i) in items" :key="i" > <v-list-item-icon> <v-icon v-text="item.icon"></v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item[data_to_display]"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-container> </v-main> </v-app> </div>