如何跟蹤用戶對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