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>

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

1 个答案: