CODEWITHSUNDEEP
javascriptvue.js
Konrad Kahl
Konrad Kahl

Reputation: 177

Vue dynamic components not re rendering inside v-for loop when data changes

I have dynamic table component where I can modify columns (ordering, adding new, removing columns). Table body looks like this:

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

Everything works well except when I edit data (add new column or rearrange the order) then every component inside table body disappears and is not rendered. I tried to attach unique :key to <component> but was not able to make it work. When I inspect table body in Vue devtools I can see that components are inside just not rendered into DOM. When inspecting table body in chrome devtools I can see only <!--function(e,n,r,o){return dn(t,e,n,r,o,!0)}--> in place where component should be rendered. Any ideas what I might be doing wrong here?

Upvotes: 1

Views: 2725

Answers (2)

Konrad Kahl
Konrad Kahl

Reputation: 177

Turns out I was passing Component object into :is directive instead of string with Component name. That's why it was not rendered properly.

Upvotes: 0

Dmitry
Dmitry

Reputation: 1637

You are using duplicated keys. You should provide unique keys for all v-for elements inside the whole component. Try this (see key for every column):

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

Also when you are in development it is highly recommended to use Vue development mode. It will highlight errors like this.

Upvotes: 3

Related Questions