Javascript 删除表行时保留语义UI下拉列表值

根据数组“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>

这是一个带有完整代码的代码笔：

现在，如果状态更改为“Delete”，尽管行被删除，但下拉列表“Delete”的值将保留在该行上

要在代码笔样本中复制，请将第一行的状态（索引0）更改为“删除”。您将看到“Doe”的状态显示为“删除”

此外，如果更改了任何下拉列表值。当其他行的下拉列表值更改时，状态已更改的前一行保留该值

要在codepen示例中复制，请重新加载页面。现在，将第三行（索引2）的状态更改为“活动”。现在通过选择“删除”删除第二行（索引1）。您将看到最后一行保留值“Active”

---

有人能帮我解决这个问题吗？

要解决这个问题，您可以定义密钥。见下文：

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

{{index}}
{{row.name}
{{row.status}}
{{status.status}

---

定义键应该在dom项实例在表中移动时维护它

首先，数据应该是一个函数。然后，不要对事件使用jQuery，使用vue。在这种情况下，数据不需要是数据的函数。使用jQuery会把事情搞得一团糟，我建议您不要使用它，但是，我看到语义ui依赖于它。但是，您可以使用vue版本。在这种情况下，我不需要多个实例。因此，不需要将数据作为函数。是的，我知道应该避免在Vue中使用JQuery。我能够通过简单的select和vue事件实现该功能。然而，我的整个项目库是用语义ui编写的。语义用户界面在很大程度上依赖于JQuery。是的，我最初尝试了语义ui vue，但有很多东西不稳定。于是我开始了这个项目，使用语义用户界面。非常感谢。这解决了问题：）

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