Vue.JSを使って配列のオブジェクトを編集する

Question

私はVuejs + Laravelを使って私の最初のアプリを開発していますが、今まで解決できなかった問題に直面しています！

私はオブジェクトの配列を持っているので、削除せずに1つを編集して新しいものを追加する必要があります！私はJSビンを私が必要とするものを見せるために作った！編集をクリックし、元の値が同様に編集が、私は、ユーザーが保存ボタンを押した後にのみ、元の値を変更する必要があなたの新しい値を入力し始める

JS Bin

！

誰かが私を助けることができますか？

PS：データベースを更新して、テーブルに新しい値を表示します！

編集機能で同期を取らずにレコードを複製することはありますか？

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

あなたはクローン化された更新1で古いオブジェクトを置き換えることができます。

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

あなただけ提出したユーザの後に値を保存したい場合は、直接そのようv-model="record.name"としてレコードを結合してはいけません。

Vue.setを使用して元のレコードの属性を変更することができます。

レッツ・トライ：JS Bin