При удалении строки таблицы раскрывающееся значение семантического пользовательского интерфейса сохраняется

Question

Таблица отображается со строками на основе значений в массиве 'results'. В каждой строке есть выпадающий список, который заполняется массивом «status».

<div id="app">
<table>
 <tr v-for="(row,index) of results">
 <td>{{index}}</td>
 <td>{{row.name}}</td>
 <td>
 <div :id="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>

Ниже приводится функция раскрывающегося списка изменений, которая в основном удаляет строку, если выбранный текст в раскрывающемся списке имеет значение «Удалить»:

$('.status_dropdown').dropdown({
    onChange: function(value, text, $choice) {
        let temp_index = $($choice).attr("data-index");
        if(text === "Delete"){
          vm.results.splice(temp_index,1);
        }
  }
  });

Вот кодекс с полным кодом: https://codepen.io/anon/pen/KxzZOB

Теперь, если статус изменен на «Удалить», хотя строка удаляется, значение выпадающего «Удалить» сохраняется в этой строке.

Чтобы воспроизвести в образце кода ручки, измените статус первой строки (индекс 0) на «Удалить». Вы увидите, что статус «Доу» отображается как «Удалить».

Кроме того, если любое из раскрывающихся значений изменяется. И раскрывающееся значение некоторой другой строки изменяется, предыдущее значение, для которого был изменен статус, сохраняет значение.

Чтобы воспроизвести в образце кода ручки, перезагрузите страницу. Теперь измените статус для третьей строки (индекс 2) на «Активный». Теперь удалите вторую строку (индекс 1), выбрав «Удалить». Вы увидите, что последняя строка сохраняет значение «Актив».

Может кто-нибудь помочь мне с этой проблемой?

Answer 1

Чтобы решить эту проблему, вы можете определить ключ. см. ниже:

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

Определение ключа должно поддерживать экземпляр элемента dom, пока он перемещается в таблице.