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

如何跟踪VueJS数组中的哪些项目已被用户突变？

1 个答案: