按下按钮时如何将数据表格插入表格？

Question

如何让Vuejs在按下按钮时在一个表格中添加多个数据表单？我可以只用一个表单来做到这一点，我需要通过输入和选择表单来实现它，当我按下按钮将它添加到列表中时。谢谢。

这是一个例子： http://embed.plnkr.co/aax7vC/

Answer 1

从您的示例中，我假设您希望多个字段进入元素列表。这意味着一切都与您的数据模型有关。您必须为 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);
    }
  }
});

请注意，推送复制了结构，而不是仅添加 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>