J'ai un composant de table dynamique où je peux modifier les colonnes (ordre, ajout de nouvelles, suppression de colonnes). Le corps de la table ressemble à ceci:

<tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.slug">
          <component
            v-if="column.component"
            :is="column.component"
            v-bind="{ row: row, countries: row.reach }"
          />
          <template v-else>
            {{ row[column.slug] }}
          </template>
        </td>
      </tr>

Tout fonctionne bien sauf lorsque j'édite data (ajouter une nouvelle colonne ou réorganiser l'ordre) puis chaque composant à l'intérieur du corps de la table disparaît et n'est pas rendu. J'ai essayé d'attacher un :key unique à <component> mais je n'ai pas réussi à le faire fonctionner. Lorsque j'inspecte le corps de la table dans Vue devtools, je peux voir que les composants ne sont tout simplement pas rendus dans DOM. Lors de l'inspection du corps de la table dans Chrome devtools, je ne vois que <!--function(e,n,r,o){return dn(t,e,n,r,o,!0)}--> à l'endroit où le composant doit être rendu. Des idées sur ce que je pourrais faire de mal ici?

0
Konrad Kahl 27 août 2020 à 15:54

2 réponses

Meilleure réponse

Il s'avère que je passais l'objet Component dans la directive :is au lieu de string avec le nom du composant. C'est pourquoi il n'a pas été rendu correctement.

0
Konrad Kahl 2 sept. 2020 à 09:05

Vous utilisez des clés dupliquées. Vous devez fournir des clés uniques pour tous les éléments v-for à l'intérieur du composant entier. Essayez ceci (voir key pour chaque colonne):

      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="`${row.id}/${column.slug}`">
          <component
            v-if="column.component"
            :is="column.component"
            v-bind="{ row: row, countries: row.reach }"
          />
          <template v-else>
            {{ row[column.slug] }}
          </template>
        </td>
      </tr>

De plus, lorsque vous êtes en développement, il est fortement recommandé d'utiliser le mode de développement Vue. Cela mettra en évidence des erreurs comme celle-ci.

1
Dmitry 27 août 2020 à 13:01