无法在 bootstrap vue table 中更新数据

Question

内嵌数据未更新 edit.when 点击 'done' 数据为空。我正在使用 bootstrap vue table.api 工作正常但内联编辑不起作用并且它使数据库中的数据为空。

这是我的 bootstrap table 代码：

        <template #cell(name)="data">
      <div v-if="editting===data.item.id"><b-form-input type="text" v-model="form.name"></b-form-input>
</div>
      <span v-else>{{data.item.name}}</span>
    </template>

    <template #cell(price)="data">
      <div v-if="editting===data.item.id"><b-form-input type="text" v-model="form.price"></b-form-input>
</div>
      <span v-else>{{data.item.price}}</span>
    </template>

      <template v-slot:cell(actions)="data">
        <div v-if="editting===data.item.id">
            <button @click="updateTest(data.item.id)">Done</button>
            <button @click="editting = null">Cancel</button>
        </div>

        <div v-else>
        <a href="#" class="edit" title="Edit" data-toggle="tooltip"  @click="editMode(data.item.id,data.item,data.item.index)"> <span ><i class="material-icons">&#xE254;</i></span></a>
        </div>
      </template>

脚本代码：

<script>

export default {
data(){
    return{
    invoice_products: [{
        name: '',
        price: '',
    }],
    
  filter: "",
  perPage: 5,
  currentPage: 1,
  fields: ["id", "name", "price", "Actions"],
  columns:[],
  selectedRow: {},
  cancleButton: null,
  showDeleteModal: false,
  editting: null,
 form: {
      id: '',
      name: '',
      price: '',
    },
     form_index : 0,
    }
    }
},
computed: {
  rows() {
    return this.columns.length
  }
},

更新方法：

           updateTest(id) {
         this.$http.post('http://127.0.0.1:8000/api/updateTest/' + id,{

         })
            .then((res)=>{
                this.editting=null
                self.message = 'Data is entered';
                })    
    },

Controller.php更新函数：

    public function updateTest($id, Request $request)
{
    $updateTest = Test::find($id);
    $updateTest->update($request->all());

    return response()->json('successfully updated');
}

Answer 1

已解决：我必须在 updateTest 中传递表单 function.Here 是我的函数：

        updateTest() {
        alert(JSON.stringify(this.form))
         this.$http.post('http://127.0.0.1:8000/api/updateTest/' + this.form.id,this.form)
            .then((response)=>{
                this.editting=null
                this.getTests();
                alert("update");
                self.message = 'Data is entered';
                })   
    },

无法在 bootstrap vue table 中更新数据

Can't update data in bootstrap vue table

vue.js

bootstrap-vue