web-dev-qa-db-fra.com

Dans la table de données Vuetify, colonne de table avec modèle d'emplacement

Dans le tableau de données Vuetify, pour la colonne de table avec le modèle d'emplacement, il est possible d'utiliser le nom de colonne avec le boîtier Camel, prenant actuellement en charge uniquement les noms de colonne, avec des minuscules dans le modèle par exemple

Cela ne fonctionne pas:

   <template v-slot:item.firstName="{item}">
       <span>{{item.prefix}} {{item.firstName}} {{item.lastName}} </span>
   </template>

Cela marche :

   <template v-slot:item.firstname="{item}">
       <span>{{item.prefix}} {{item.firstname}} {{item.lastname}} </span>
   </template>

Mon modèle de données possède des propriétés comme celle-ci.

contactsList: {
  {lastName : "Ray",
  firstName : "Sam",
   prefix : "Dr."},
  {lastName : "Bank",
   firstName : "Paul",
   prefix : "Jr."}}
vuetify.jsvue-tables-2
4
Code First

Passez props au lieu de { item } pour le v-slot affectation des accessoires.

De cette façon, vous n'avez pas à vous amuser avec le header.value; entrez le nom de la clé tel quel sans avoir à considérer le casse alpha. Remarque: vous devez définir en minuscules lorsque vous souhaitez passer un objet.

Avant (c.-à-d. Exemple dans la question OP):

<template v-slot:item.firstName="{item}">
  <span>{{item.prefix}} {{item.firstName}} {{item.lastName}} </span>
</template>

Après:

<template v-slot:item.firstName="props">
  <span>{{props.item.prefix}} {{props.item.firstName}} {{props.item.lastName}} </span>
</template>
1
seantunwin