Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

228
Visualizações
¿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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda