如何跟踪用户对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