Vue.js - ネストされたプロパティ値の変更を検出する

Question

Vue.js 2.0アプリケーションのオブジェクトの配列に動的にバインドしています。私はその配列変更の値としての変更に対応したいと思います。このとき、このFiddleに示したように、私は次のようしている：私はバインドする方法を見つけるように見えることはできませんジャバスクリプト

new Vue({ 
    el: '#app', 
    data: { 
    cols: [ 
     { title: 'Name', prop:'name' }, 
     { title: 'Age', prop:'age' }, 
     { title: 'Birthday', prop:'birthday' },  
    ], 

    inputValues: [], 

    items: [ 
     { id:1, name:'Andreas Winchell', age:47, birthday:'08-04-1970' }, 
     { id:2, name:'Victoria Hodges', age:80, birthday:'01-24-1937' },  
     { id:2, name:'James Morris', age:59, birthday:'06-14-1958' },  
     { id:2, name:'Larry Walker', age:68, birthday:'08-07-1949' },  
     { id:2, name:'Lee Maynard', age:46, birthday:'04-17-1971' } 
    ] 
    }, 

    methods: { 
    buttonClick: function() { 
     alert(JSON.stringify(this.inputValues)); 
    } 
    } 
}) 

HTML

<div id="app"> 
    <table> 
    <thead> 
     <tr> 
     <th v-for="(col, index) in cols"> 
      <input :placeholder="col.title" v-model="inputValues[col.prop]" /> 
     </th>   
     </tr> 
    </thead> 

    <tbody> 
     <tr v-for="(item, index) in items"> 
     <td>{{ item.name }}</td> 
     <td>{{ item.age }}</td> 
     <td>{{ item.birthday }}</td> 
     </tr> 
    </tbody> 
    </table> 

    <hr /> 
    <textarea>{{ inputValues }}</textarea> 
</div> 

ヘッダーに入力された値のいずれかの変更。配列のプロパティ値の変更を検出して対応するにはどうすればよいですか？

Answer 1

inputValuesは配列ではなくオブジェクトである必要があります。

data: { 
    cols: [ 
    { title: 'Name', prop:'name' }, 
    { title: 'Age', prop:'age' }, 
    { title: 'Birthday', prop:'birthday' },  
    ], 
    // inputValues should be an object.  
    inputValues: {name: null, age: null, birthday: null }, 

    items: [ 
    { id:1, name:'Andreas Winchell', age:47, birthday:'08-04-1970' }, 
    { id:2, name:'Victoria Hodges', age:80, birthday:'01-24-1937' },  
    { id:2, name:'James Morris', age:59, birthday:'06-14-1958' },  
    { id:2, name:'Larry Walker', age:68, birthday:'08-07-1949' },  
    { id:2, name:'Lee Maynard', age:46, birthday:'04-17-1971' } 
    ] 
} 

Answer 2

あなたのデータで配列を使用していますが、Vue will not detect direct changes to the array referencing an item by its indexことができます。 Vueはpush（）、pop（）、slice（）などの変更を検出します。

「Cols」のような配列は災害です。 '名前'、 '年齢'、 '誕生日'はデータではなくコード（プロパティ名）です。あなたは本当にこのようなフォームを生成する配列を反復処理したくないです。シンプルにして、3つの入力をコーディングしてください。