Question

根据数组“结果”内的值，用行呈现表。每行中都有一个下拉菜单，通过数组“状态”填充。

<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);
        }
  }
  });

这是一个带有完整代码的Codepen：https://codepen.io/anon/pen/KxzZOB

现在，如果状态更改为“删除”，则尽管删除了该行，但下拉菜单中“删除”的值仍保留在该行上。

要在codepen样本中重现，请将第一行的状态（索引0）更改为“删除”。您会看到“ Doe”的状态显示为“ Delete”。

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

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

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

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项目实例。

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

1 个答案: