[Vuejs]-Semantic UI dropdown value getting retained, when the table row is deleted

by

0👍

✅

To resolve this issue, you can define the key. see below:

<div id="app">
<table>
  <tr v-for="(row,index) of results">
    <td>{{index}}</td>
    <td>{{row.name}}</td>
    <td>
      <div :id="row.id"
           :key="row.id"
           class="ui selection dropdown status_dropdown">
        <i class="dropdown icon"></i>
        <div class="text">{{row.status}}</div>
        <div class="menu">
          <div class="item" v-for="status of statuses"
               :data-index="index">
            {{status.status}}
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>
</div>

Defining the key should maintain the dom item instance while it moves within the table.

Leave a comment