How to add new line within copying existing line in Vuejs - Laravel project

Question

Here is my code. When click "Add New Line" button, adding a blank line fine. But, I need to adding copy existing line data within new table line. Please help me.

  

  addMarkerLine(){
        this.form.markeratios.push({
              size:null,
              ratio:0,
         })
      },

    <form action="">
     <table>
     <thead>
     <tr>
        <th>SL.</th>
        <th>Size</th>
        <th>Ratio</th>
        <th>Action</th>
    </tr>`enter code here`
    </thead>
    <tbody>
     <tr v-for="(markeratio , index) in form.markeratios ">
        <td >{{index + 1}}</td>
        <td ><input type="text" v-model="markeratio.size"></td>
        <td ><input type="text" v-model="markeratio.ratio"></td>
        <td><button>Copy This Line</button></td>
    </tr>
    </tbody>
    <tfoot>
   <tr>
      <td><span @click="addMarkerLine">Add New Line</span></td>
   </tr>
   </tfoot>
 </table>
</form>

Answer 1

If you want to copy the data into the next row, you just have to define a function copyRow that accepts an object data and when your Copy This Line button is clicked, pass the current object to copyRow function. In that function, just push the data to the form.markeratios.

<template>
  ...
  <tr v-for="(markeratio , index) in form.markeratios ">
    <td >{{index + 1}}</td>
    <td ><input type="text" v-model="markeratio.size"></td>
    <td ><input type="text" v-model="markeratio.ratio"></td>
    <td><button @click="copyRow(markeratio)">Copy This Line</button></td>
  </tr>
  ...
</template>

<script>
export default {
  ...
  data: {
    return {
      form: {
        markeratios: []
      }
    }
  },
  methods: {
    copyRow(data) {
      this.form.markeratios.push(data);
    }
  }
}
</script>