[英]Edit object of an array using Vue.JS
I am developing my first app using Vuejs + Laravel and I am facing a problem that I couldn't solve until now! 我正在使用Vuejs + Laravel开发我的第一个应用程序,并且遇到了一个直到现在我都无法解决的问题!
I have an array of object and I need to edit a single of then without delete and add a new one! 我有一个对象数组,我需要编辑一个然后删除而不添加一个对象! I have made a JS Bin to show what I need!
我做了一个JS Bin来展示我的需求!
When you click in EDIT and start to typing your new value the original value edits as well but I need to change the original value only after the user hit the save button! 当您单击“编辑”并开始输入新值时,原始值也会编辑,但是只有在用户按下“保存”按钮后,我才需要更改原始值!
Anybody can help me? 有人可以帮助我吗?
PS: I will update my database and then show the new value on the table! PS:我将更新数据库,然后在表上显示新值!
Is there anyway to duplicate my record as I do on the edit function without sync then? 无论如何,是否像我在编辑功能中一样复制记录,而不进行同步?
JS JS
new Vue({
el: 'body',
data: {
cache: {},
record: {},
list: [
{ name: 'Google', id: 1 },
{ name: 'Facebook', id: 2 },
],
},
methods: {
doEdit: function (record) {
this.cache = record;
},
edit: function (record) {
this.record = _.cloneDeep(record);
this.cache = record;
}
}
});
HTML 的HTML
<div class="container">
<form class="form-horizontal" @submit.prevent="doEdit(record)">
<div class="row">
<div class="col-md-12">
<label>Name</label>
<input type="text" class="form-control" v-el:record-name v-model="record.name">
</div>
<div class="col-xs-12" style="margin-top:15px">
<button type="submit" class="col-xs-12 btn btn-success">Save</button>
</div>
</div>
</form>
<hr>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="r in list">
<td class="text-center" style="width:90px"> {{ r.id }} </td>
<td> {{ r.name }} </td>
<td class="text-center" style="width:90px">
<span class="btn btn-warning btn-xs" @click="edit(r)"><i class="fa-fw fa fa-pencil"></i></span>
</td>
</tr>
</tbody>
</table>
</div>
You can replace the old object with the cloned-updated one. 您可以将旧对象替换为克隆更新的对象。
doEdit: function (record) {
var index = _.indexOf(this.list, this.cache);
this.list.splice(index, 1, record);
}
https://jsbin.com/ruroqu/3/edit?html,js,output https://jsbin.com/ruroqu/3/edit?html,js,输出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.