Как вставить форму данных в таблицу при нажатии кнопки?

Question

Как заставить Vuejs добавить в таблицу несколько форм данных при нажатии кнопки? Я могу сделать это только с одной формой, мне нужно сделать это с формой ввода и выбора, а когда я нажму кнопку, чтобы добавить ее в список. Благодарю.

Вот пример: http://embed.plnkr.co/aax7vC/

Answer 1

Из вашего примера, я предполагаю, что вы хотите, чтобы несколько полей, чтобы войти в список элементов. Это означает, что все зависит от вашей модели данных. Вы должны реплицировать структуру «таблицы», которая требуется для одного отдельного элемента. Поэтому просто объявите объект с этими полями и привяжите данные. Затем, когда вы нажимаете «Добавить», просто добавьте этот объект (если ваш массив имеет тот же тип).

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

Обратите внимание, что push реплицирует структуру, а не просто добавляет this.newElement. Это вызовет ссылку, и когда вы очистите newElement, она будет очищена в массиве. Тогда ваш HTML может быть так:

 <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>