[Solved] How to insert data form into table when press a button?

by


From your example, I’m assuming you want multiple fields to go into a list of elements. This means it’s all about your data model. You must replicate the “table” structure that you want for 1 single element. So simply declare an object with those fields and do the data binding. Then when clicking “Add”, simply add that object (assuming your array is of the same type).

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

Notice that the push replicates the structure, instead of just adding this.newElement. That will cause a reference relationship, and when you clear newElement it will be cleared in the array.
Then your HTML can be like this:

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

6

solved How to insert data form into table when press a button?