Vue.jsデータ配列の要素を子コンポーネントのプロパティにバインドする方法は？

Question

私はいくつかの表データを表示するためにvue-tablesを使用しています。私は特定の列のセルを編集可能にするためにvueテーブルを拡張しようとしています。そこで、私はセルコンテンツを編集できるvuejs子コンポーネント "editable-cell"を作成しました。この子コンポーネントは、編集可能な列のvue-tablesテンプレートとして挿入されます。

これらは私VUE-テーブルのオプションは次のとおりです。

 headings: { 
      title: 'Title', 
      description: 'Description', 
      createdBy: 'Created By', 
      createdAt: 'Created At', 
      updatedAt: 'Updated At', 
     }, 
     compileTemplates: true, // compile vue.js logic on templates. 
     templates: { 
      title: function(row) { 
      return '<editable-cell row-id="'+row._id.$oid+'" key="title" value="'+row.title+'"></editable-cell>' 
      }, 

は現在、私は唯一の子コンポーネントまでrow.titleのプレーンな文字列値を渡しています。

私の問題：それが更新されると、親コンポーネントのデータは変更されません。私は:value.sync="..."でプロパティの双方向バインディングについて知っていますが、親データの正しい要素にバインドしたいときはどうすればいいですか？

vue-tablesは行をテンプレート関数に渡します。親データの正しい要素にバインドする方法配列？

が

UPDATE私は私の問題を示しているJSFiddleを作成するために管理： https://jsfiddle.net/Doogie/nvmt0vd7/

Answer 1

私は1つの可能な解決策を見つけた： あなたがダウンして、子コンポーネントにオブジェクトを渡すと、それは、参照による渡されます。つまり、子コンポーネントがこのオブジェクトのプロパティを更新すると、その変更はパーラントデータにはっきりと表示されます。

したがって、編集可能な各セルに行全体を渡すだけです。次に、その行のプロパティ/値を更新できます。