如何在 Vuejs 中复制现有行中添加新行 - Laravel 项目

Question

这是我的代码。 单击“添加新行”按钮时，添加一个空行即可。 但是，我需要在新表行中添加复制现有行数据。 请帮我。

  

  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

如果你想将数据复制到下一行，你只需要定义一个函数copyRow，它接受一个object数据，当你的Copy This Line按钮被点击时，将当前对象传递给copyRow功能。在该函数中，只需将数据推送到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>