Wie füge ich ein Datenformular in die Tabelle ein, wenn ich eine Taste drücke?

Question

Wie können Vuejs in einer Tabelle mehr als ein Datenformular hinzufügen, wenn sie eine Taste drücken? Ich kann es nur mit einem Formular machen, ich muss es mit Eingabe machen und Formular auswählen und wenn ich einen Knopf drücke, um es in einer Liste hinzuzufügen. Vielen Dank.

Hier ein Beispiel: http://embed.plnkr.co/aax7vC/

Answer 1

Von Ihrem Beispiel, ich nehme an, dass Sie mehrere Felder gehen, in eine Liste von Elementen wollen. Das heißt, es geht nur um Ihr Datenmodell. Sie müssen die Struktur "Tabelle" replizieren, die Sie für 1 einzelnes Element wünschen. Erklären Sie einfach ein Objekt mit diesen Feldern und führen Sie die Datenbindung durch. Wenn Sie dann auf "Hinzufügen" klicken, fügen Sie einfach dieses Objekt hinzu (vorausgesetzt, Ihr Array ist vom selben Typ).

app = new Vue({ 
    el: "#main", 
    data: { 
    users: [], 
    newElement: {user:"",status:""} 
    }, 
    methods: { 
    addUser: function(){ 
     this.users.push({user:this.newElement.user,status:this.newElement.status}); 
     this.newElement = {user:"",status:""}; 
    }, 
    removeUser: function(item){ 
     this.users.splice(item,1); 
    } 
    } 
}); 

Beachten Sie, dass der Schub die Struktur repliziert, anstatt nur this.newElement hinzufügen. Das verursacht eine Referenzbeziehung, und wenn Sie newElement löschen, wird es im Array gelöscht. Dann können Sie Ihre HTML so aussehen:

 <input type="text" v-model="newElement.user"> 
 
     <select v-model="newElement.status"><option>Hired</option><option>Fired</option></select> 
 
     <button v-on="click: addUser()" v-attr="disabled: newElement.user ===''">Add</button> 
 
     <p v-if="users.length > 0">Click to remove</p> 
 
     <ul> 
 
     <li v-repeat="u : users" v-on="click: removeUser(u)">{{u.user}} {{u.status}}</li> 
 
     </ul>