Question

我在vue.js中有一个对象数组。每个对象都是一个模型。我想跟踪每个更新的对象（而不仅仅是更新的值），这样我就能有一个很大的＆＃34; save＆＃34;按钮将更新的数据推送到服务器。

目标是仅推送更新的模型。如果我的数组中有1000行，我不想将1000个更新推送到服务器（数据库），而只推送我编辑过的那些。

由于

使用一些代码进行更新

<ul>
    <li v-for="item in items" :key="item.id">
        <input v-model="item.title" />
    </li>
</ul>

Answer 1

向对象添加editedTitle: ''属性并将其设置为v-model。

现在为输入添加一个onblur事件监听器，如果编辑了输入标题，则将该项目推送到另一个数组

<ul>
    <li v-for="item in items" :key="item.id">
        <input v-model="item.editedTitle" @blur="addToUpdated(item)/>
    </li>
</ul>

data(){
    return {
        items;[],
        updatedItems:[]
    }
}
methods:{
    addToUpdated(item){
        if(item.title !== item.editedTitle){
            this.updatedItems.push(item);
        }
    }
}

跟踪vue.js中的对象更新

1 个答案: