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

Question

这是我的代码。当点击“Add New Line”按钮时，添加一个空行就好了。但是，我需要在新的 table 行中添加复制现有行数据。请帮我。

  

  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

如果您想将数据复制到下一行，您只需定义一个接受 object 数据的函数 copyRow，当您的 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>

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

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

vuejs2

laravel-5.7