Блог

У меня есть компонент динамической таблицы, в котором я могу изменять столбцы (упорядочивать, добавлять новые, удалять столбцы). Тело таблицы выглядит следующим образом:

 <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>
  

Все работает хорошо, за исключением случаев, когда я редактирую data (добавляю новый столбец или меняю порядок), тогда каждый компонент внутри тела таблицы исчезает и не отображается. Я пытался прикрепить unique :key к <component> , но не смог заставить его работать. Когда я проверяю тело таблицы в Vue devtools, я вижу, что компоненты внутри просто не отображаются в DOM. При проверке тела таблицы в chrome devtools я вижу только <!--function(e,n,r,o){return dn(t,e,n,r,o,!0)}--> в том месте, где должен отображаться компонент. Есть идеи, что я могу здесь делать неправильно?

Вы используете дублированные ключи. Вы должны предоставить уникальные ключи для всех v-for элементов внутри всего компонента. Попробуйте это (см. key для каждого столбца):

       <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>
  

Также, когда вы находитесь в разработке, настоятельно рекомендуется использовать режим разработки Vue. Это выделит ошибки, подобные этой.

Оказывается, я передавал объект компонента в :is директиву вместо string имени компонента. Вот почему это не было отображено должным образом.