[Vuejs]-VueJS and Laravel get data from html <table> and do a bulk upload to laravel

by

0👍

Check this fiddle: https://jsfiddle.net/7nxhygLp/282/

<div id="app">
<table class="table">
  <thead>
    <tr>
      <td><strong>Name</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in rows">
      <td><input type="text" v-model="row.name"></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="removeRow(row)">Remove</a></td>
    </tr>
  </tbody>
</table>
<div>
  <button class="button btn-primary" @click="addRow">Add row</button>
  <button class="button btn-primary" @click="submitRows">Submit rows</button> <!-- Add this -->
</div>
</div>

var app  = new Vue({
  el: "#app",
  data: {
    rows: [
      {name: "James Bond",job: "spy"},
      {name: "Goldfinger", job: "villain"}
    ]
  },
  methods:{
    addRow: function(){
      this.rows.push({name:"",job:""});
    },
    removeRow: function(row){
      //console.log(row);
      this.rows.$remove(row);
    }, 
    submitRows: function() { // add the action
        axios.post('/api/link/here', rows)
        .then( (response) => {
            console.log(response)
        })
    }
  }
});

then, in your controller, iterate through the array and save to db:

foreach ($request['rows'] as $row) {
    [*addClassHere*]::create($row);
}

This is how I did it.

👤Stretsh

Leave a comment