Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

226
Vistas
¿Cómo mostrar una matriz que representa un valor en un par de valores clave dentro de {} como un elemento de lista en VueJS?

Tengo un objeto de la siguiente manera. Dentro de ese objeto hay una clave con el valor de tipo matriz. ¿Cómo puedo mostrarlo al usuario como una lista?

 allComponents: [ {name: 'Standard field', uses: ['Inconsistent inputs', 'Formula container']}, {name: 'Dropdown', uses: ['Single answer questions with finite responses', 'Used as a filter option in later tables in dashboards']}, {name: 'Multiple choice', uses: ['Single answer questions with finite responses', 'Used as a filter option in later tables in dashboards']}, {name: 'List', uses: ['Recording lists of data, such as costs, with known variables', 'Formulas can provide automated calculations of data']}, {name: 'Date', uses: ['Recording dates', 'Provides time aggregations for tables & dashboards']}, ],

Esto es lo que estoy usando para mostrar el nombre al usuario:

 <v-tabs vertical> <v-tab v-for="component in allComponents" :key="component.name"> {{ component.name }} </v-tab> <v-tab-item v-for="component in allComponents" :key="component.name"> <v-form> <!-- Name --> <label class="add-component-name">Name</label> <p>{{ component.name }}</p> <!-- Uses --> <label class="add-component-sub-heading">Uses</label> <div v-for="component in allComponents.filter(comp=>comp.uses)" :key="component.name"></div> <v-list class="background-colour-grey"> <v-list-item> <v-list-item-content> {{ component.uses }} </v-list-item-content> </v-list-item> </v-list> </v-form> <v-btn @click="showAddComponentDialog = false"/> </v-tab-item> </v-tabs>

Sin embargo, todo lo que muestra es una matriz. ¿Cómo puedo hacer que muestre una lista como

  • Entradas inconsistentes
  • Contenedor de fórmula

Para el componente de campo estándar (como ejemplo, debe aplicarse a todos los elementos de la matriz).

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puede acceder a los uses dentro de cada componente como component.uses . Podría ejecutar un v-for y mostrarlo.

 <v-tab-item v-for="component in allComponents" :key="component.name"> <v-form> <!-- Name --> <label class="add-component-name">Name</label> <p>{{ component.name }}</p> <!-- Uses --> <label class="add-component-sub-heading">Uses</label> <div v-for="use in component.uses" :key="use"></div> <v-list class="background-colour-grey"> <v-list-item> <v-list-item-content> {{ use }} </v-list-item-content> </v-list-item> </v-list> </v-form> <v-btn @click="showAddComponentDialog = false" /> </v-tab-item>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda