Question

我有一个值表...我需要为该表中的每一行创建就地编辑表单体验。作为用户，当我单击“编辑”按钮时。那一行将变为表格，然后我可以编辑并按该行的“提交”按钮。我该如何实现？

我该如何实现？另外，我对Vue有点陌生。因此，如果您能在响应中提供一个可行的示例，那就太好了。

谢谢您的时间。

这是我到目前为止所拥有的。...

<table class="table table-striped table-bordered" >
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Duration</th>
        <th scope="col">Freq</th>
        <th scope="col">Dosage</th>
        <th scope="col">Notes</th>
        <th scope="col">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="med in catMedications">
       <td><form :id="'form'+med.id" @submit.prevent="validateMedicationsBeforeSubmit(med.id, med.name, 'edit')"><fg-input v-if="!showRow" name="id" :value="med.id"></fg-input></form><span v-if="showRow">{{med.id}}</span></td>
       <td><fg-input v-if="!showRow" :form="'form'+med.id" name="name" v-validate="'required'" v-model="name" type="text" :placeholder="med.name" :error="getError('requiredText')"></fg-input><span v-if="showRow">{{med.name}}</span></td>
       <td><fg-input v-if="!showRow" :form="'form'+med.id" name="duration" v-validate="'required'" v-model="duration" type="text" :placeholder="med.duration" :error="getError('duration')"></fg-input><span v-if="showRow">{{med.duration}}</span></td>
       <td><fg-input v-if="!showRow" :form="'form'+med.id" name="frequency" v-validate="'required|integer'" v-model="frequency" :error="getError('frequency')" type="text" :placeholder="med.frequency"></fg-input><span v-if="showRow">{{med.frequency}}</span></td>
       <td><fg-input v-if="!showRow" :form="'form'+med.id" name="dosage" v-validate="'required|integer'" v-model="dosage" :error="getError('dosage')" type="text" :placeholder="med.dosage"></fg-input><span v-if="showRow">{{med.dosage}}</span></td>
       <td><fg-input v-if="!showRow" :form="'form'+med.id" name="notes" v-model="notes" :error="getError('notes')" type="textarea" :placeholder="med.notes"></fg-input><span v-if="showRow">{{med.notes}}</span></td>
        <td>
            <button class="btn btn-sm btn-info" @click='showRow = !showRow'><span v-if="showRow">Edit</span><span v-if="!showRow">Cancel</span></button>
            <button type="submit" class="btn btn-sm btn-info" v-if="!showRow">Submit</button>
        </td>
    </tr>
    </tbody>
</table>


data () {
   return{
      showRow: true,
   }
}

ANS：基于BERT的密码笔...

<div id="app">
  <table class="table table-striped table-bordered" >
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="med in catMedications">
        <td><input v-if="!med.showRow" name="id" v-model="med.id"/><span v-if="med.showRow">{{med.id}}</span></td>
        <td><input v-if="!med.showRow" :form="'form'+med.id" name="name" v-model="med.name" /><span v-if="med.showRow">{{med.name}}</span></td>

        <td>
          <button class="btn btn-sm btn-info" @click='med.showRow = !med.showRow'><span v-if="med.showRow">Edit</span><span v-if="!med.showRow">Cancel</span></button>
          <button type="submit" class="btn btn-sm btn-info" v-if="!med.showRow">Submit</button>
        </td>
      </tr>
    </tbody>
  </table>

</div>

new Vue({
  el: "#app",
  data:{
    catMedications:[
      {id: 1, name: "Bob", showRow: true},
      {id: 2, name: "Mary", showRow: true},
    ]
  }
})

注意：我的catMedications数组来自外部后端数据库，因此我不得不更改该表的模型，只需添加“ showRow：true”布尔字段即可。

现在我可以选择每一行。

（努力查看是否可以按预期方式发布到表单...稍后我将相应地更新此帖子）

如何一次切换单个行以查看由数组生成的行？

0 个答案: