Question

我有动态表组件，可以在其中修改列（排序，添加新列，删除列）。表主体看起来像这样：

<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（添加新列或重新排列顺序）时，表主体中的每个组件都会消失并且不会呈现。我试图将唯一的:key附加到<component>上，但是无法使其正常工作。当我在Vue devtools中检查表主体时，我可以看到组件位于内部，只是没有呈现为DOM。在chrome devtools中检查表格主体时，我只能在应该呈现组件的位置看到。有什么想法我可能在这里做错了吗？

Answer 1

您正在使用重复的键。您应该为整个组件内的所有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开发模式。它将突出显示这样的错误。

Answer 2

结果是我将Component对象传递给:is指令，而不是带有组件名称的string。这就是为什么渲染不正确的原因。

数据更改时，Vue动态组件不会在v-for循环内重新呈现

2 个答案: