How can I track which item(s) in a VueJS array have been mutated by the user?

Question

I have an array or objects, and each object has a few properties. I am using a v-for to create a table with text inputs using v-model , so that the user can make changes to the properties of whichever items they wish.

What I'd like to do, is track which items have been mutated by the user. Ideally, I'd change that item's "mutated" property to true. This would allow me to easily make visual changes that would remind the user to save the changes to that element.

Right now, I'm using @keydown , but it's possible someone would paste/cut with a mouse.

Here's the code I have right now:

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

Any help you can provide would be much appreciated!!

Answer 1

Maybe I've misunderstood your problem, but can't you just use @change ?

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

You could also use @input