Edit object of an array using Vue.JS

Question

I am developing my first app using Vuejs + Laravel and I am facing a problem that I couldn't solve until now!

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!

Is there anyway to duplicate my record as I do on the edit function without sync then?

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

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

Answer 1

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

Answer 2

If you want to save the value only after user submitted, you should not bind the record directly such as v-model="record.name".

And we can use Vue.set to change attributes of the original record.

Let's try: JS Bin