vue.js - 无法更新引导 vue 表中的数据
问题描述
内联编辑中的数据未更新。单击“完成”时,数据为空。我正在使用 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"></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() {
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';
})
},
推荐阅读
- javascript - 保存javascript函数
- r - 从数据集本身向 ggplot 添加标题
- java - 在类路径中找不到任何 META-INF/persistence.xml 文件,但我已经添加了它
- .net - 如何通过 login.microsoftonline.com 身份验证?
- vb.net - 从转换为字符串的 ListBox 中删除重复项
- webstorm - 有没有人有一个在虚拟环境中拥有 Node.js 然后在 WebStorm 中使用它的具体示例?
- javascript - 如何根据单元格值添加工作表?
- c - 如何在最后一次尝试中停止解析列表而不会不匹配?
- java - Java pword-generator 不会在循环内随机更新
- python - 使用 smtplib 发送熊猫数据框