如何跟踪VueJS数组中的哪些项已被用户更改？

Question

我有一个或多个对象，每个对象都有一些属性。我使用一个v-for来使用v-model创建一个具有文本输入的表，这样用户就可以对他们想要的任何项的属性进行更改。

我想要做的，是跟踪哪些项目已被用户变异。理想情况下，我会将该项的"mutated"属性更改为true。这将使我能够轻松地进行可视更改，从而提醒用户保存对该元素的更改。

现在，我正在使用@keydown，但是可能有人会用鼠标粘贴/剪切。

下面是我现在的代码：

<tr v-for="(item, index) in Items" v-if="item.Active == 1" v-bind:class="{ 'mutated': item.mutated }">
<td>{{item.Keyword}}</td>
<td><input type="text" class="form-control" v-model="item.ID" @keydown="mutated(index)"></td>
<td><input type="text" class="form-control" v-model="item.Title" @keydown="mutated(index)"></td>
<td class="text-center pt-2">{{item.Inquiries}}</td>
<td>
    <button class="btn btn-sm btn-outline-danger" v-on:click="deactivate_pairing(index, item.ID)"><i class="material-icons">cancel</i></button>
    <button class="btn btn-sm"  v-bind:class="{ 'btn-success': item.mutated, 'btn-outline-success': !item.mutated }" v-on:click="update_pairing(index, item.ID)"><i class="material-icons">save</i></button>
</td>

​

您能提供的任何帮助都将不胜感激！

Answer 1

也许我误解了你的问题，但你就不能直接使用@change吗？

<td><input type="text" class="form-control" v-model="item.ID" @change="mutated(index)"></td>

您也可以使用@input