Vue.js - Erkennen geschachtelter Eigenschaftswertänderungen

Question

Ich bin dynamisch an ein Array von Objekten in einer Vue.js 2.0 App gebunden. Ich möchte auf Änderungen als Werte in diesem Array reagieren. Zu diesem Zeitpunkt, wie in diesem Fiddle gezeigt, habe ich folgendes:

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> 

Javascript

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

Ich kann nicht scheinen, einen Weg zu finden, zu binden, Änderungen an den in die Kopfzeile eingegebenen Werten. Wie kann ich Änderungen an Eigenschaftswerten in einem Array erkennen und darauf reagieren?

Answer 1

inputValues sollte ein Objekt sein, kein Array.

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

Sie Arrays in Ihren Daten verwenden können, aber Vue will not detect direct changes to the array referencing an item by its index. Vue erkennt Änderungen, die mit push(), pop(), slice() usw. vorgenommen wurden.

Arrays wie 'Cols' sind eine Katastrophe. "Name", "Alter" und "Geburtstag" sind Code (Eigenschaftsnamen), keine Daten. Sie wollen wirklich nicht über ein Array iterieren, das solche Formen erzeugt. Halten Sie es einfach und codieren Sie Ihre drei Eingaben.