Question

如何在按下按钮时使Vuejs在表中添加多个数据表单？我只能使用一个表单来完成它，我需要通过输入和选择表单来实现它，当我按下按钮将其添加到列表中时。感谢。

Answer 1

从您的示例中，我假设您希望多个字段进入元素列表。这意味着它完全与您的数据模型有关。你必须复制＆＃34;表＆＃34;你想要1个单一元素的结构。因此，只需使用这些字段声明一个对象并执行数据绑定。然后当点击＆＃34;添加＆＃34;时，只需添加该对象（假设您的数组属于同一类型）。

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可以是这样的：

＆＃13;

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

＆＃13;

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

1 个答案: