Question

我使用模态表单将新细节添加到表格的行中。添加细节后，我只是在它的末尾添加编辑和删除按钮。现在这里删除按钮工作正常。如何通过单击行中的“编辑”按钮弹出表单模式的复制来编辑表的一行。这是我的代码：

<div class="layout-padding">
        <div
          class="item item-link"
          v-for="modal in types"
          @click="$refs[modal.ref].open()"
        >
          <i class="item-primary">add</i>
          <div class="item-content has-secondary">
            <div>{{modal.label}}</div>
          </div>
        </div>
    </div>

 <q-modal ref="maximizedModal" class="minimized" :content-css="{padding: '50px'}">
    <div class="main">
      <label>Enter Your Name:</label>
    <input id="name" name="name" type="text" placeholder="Enter your Name" v-model="YourName">
    <br>

    <label>I am:</label>
    <input type="radio" id="Male" value="male" v-model="picked">
    Male
    <input type="radio" id="Female" value="female" v-model="picked">
    Female
    <br>    

    <div class="button">
      <button class="red" @click="$refs.maximizedModal.close()">Close</button>
      <button class="blue" v-on:click="sub" @click="$refs.maximizedModal.close()">Submit</button>
    </div>
    </div>
    </q-modal>

<table>
    <thead>
        <th>Name</th>
        <th>Gender</th> </thead>
    <tbody class="result">
        <tr v-for="(h, index) in final">
            <td v-for="(value, key, index) in h">
                    {{ value }}
            </td>
            <td><button id="edit" class="green edit" v-for="modal in types"
          @click="ed(h, index);$refs[modal.ref].open()" type="submit">EDIT</button></td>
            <td><button id="delete" class="red delete" v-on:click="del(index)" type="submit">Delete</button></td>
        </tr>
</tbody>
</table>

我的剧本是：

export default {
  data () {
    return {YourName: '',
      details: [],
      final: [],
      types: [
        {
          label: 'Add Details',
          ref: 'maximizedModal'
        }
      ],
      position: 'bottom'
    }
  },
  methods: {
    sub: function () {
      this.details = {
        'name': this.YourName,
        'gender': this.picked,
      }
      this.ed()
      if (index === '[object MouseEvent]') {
        this.final.push(this.details)
      }
      if (index > -1) {
        this.final.splice(index, 1, this.details)
      }
      else {
        alert('else')
        alert(JSON.stringify(this.details))
        this.final.push(this.details)
      }
    },
    del: function (index) {
      this.$delete(this.final, index)
    },
    ed: function (details, index) {
      return index
    }
  }
}

如果单击“编辑”按钮，则应编辑同一行。我不知道如何继续前进。请指导我。

Answer 1

使用'splice'可以修改给定的对象数组。

可以简单地将其包含在'if'循环中：

this.final.splice(this.indi, 1, this.details)

如何通过在vuejs中弹出表单模式来编辑表格中的特定行？

1 个答案: