无法更新引导 vue 表中的数据答案

【问题标题】：Can't update data in bootstrap vue table无法更新引导 vue 表中的数据
【发布时间】：2021-11-25 02:53:31
【问题描述】：

数据未在内联编辑中更新。当单击“完成”时，数据为空。我正在使用 bootstrap vue table.api 工作正常，但内联编辑不起作用，它使数据库中的数据为空。

这是我的引导表代码：

        <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');
}

【问题讨论】：

你还没有在updateTest函数中发送要更新的数据？
我试过了，但是没用，updateTest(id) { this.$http.post('127.0.0.1:8000/api/updateTest' + id,{ name: this.invoice_products.name, price: this.invoice_products. price }) .then((res)=>{ this.editting=null self.message = '数据已输入'; }) },

标签： vue.js bootstrap-vue

【解决方案1】：

解决了：我必须在 updateTest 函数中传递表单。这是我的函数：

        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';
                })   
    },

【讨论】：