Question

我正在使用Vuejs + Laravel开发我的第一个应用程序，我正面临一个直到现在我都无法解决的问题！

我有一个对象数组，我需要编辑一个然后没有删除并添加一个新对象！我已经制作了一个 JS Bin 来展示我需要的东西！

当您点击编辑并开始输入新值时，原始值也会编辑，但我需要在用户点击保存按钮后更改原始值！

任何人都可以帮助我？

PS：我将更新我的数据库，然后在桌面上显示新值！

有没有像我在编辑功能上那样复制我的记录而没有同步呢？

JS

Route::group(['middleware' => 'web'], function () {

    Route::get('foo', 'FooController@bar'); // session data should be available here
});

HTML

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

});

Answer 1

如果您只想在用户提交后保存该值，则不应直接绑定记录，例如v-model="record.name"。

我们可以使用Vue.set来更改原始记录的属性。

我们试试：JS Bin

Answer 2

您可以使用克隆更新的对象替换旧对象。

   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

使用Vue.JS编辑数组的对象

2 个答案: