我做了这个getData函数来从数据库中获取数据，现在我在添加、更新和删除函数中调用这个函数，这样我就不用每次点击后都刷新了。调用这个函数在删除函数中有效，但在添加和更新函数中无效。为什么？
我尝试以在删除函数中调用该函数的方式调用它，但它对添加和更新函数不起作用
<script>
let App = ({
data() {
return {
add_numbertype: {
'id': null,
'name': null,
'character': null,
'created_by': null,
'updated_by': null,
'transaction_id': null,
'user': null,
'status': null
},
dataList: [],
};
},
created() {
this.getData();
},
methods: {
//function for fetching data
getData() {
axios.get('/data').then((response) => {
this.dataList = response.data.result;
})
},
//end
//function for adding data
addNumbertype() {
axios.post('/add', this.add_numbertype)
.then(function(response) {
if (response.status === 200) {
document.getElementById("add-form").reset();
$('#createModal').modal('hide');
Swal.fire(
'Add',
'New record added Successfully',
'success'
)
this.getData();
} else {
alert("error");
}
}).catch(function(error) {
console.log(error.response);
})
},
//end
//function for deleting data
deleteData(id) {
axios.get('/delete/' + id).then((response) => {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
this.getData();
}).catch(function(error) {
console.log(error.response.data);
})
},
//end
//to show data in modal for update
editData(list) {
this.add_numbertype = {
'id_u': list.pn_id,
'name_u': list.pn_name,
'character_u': list.pn_character,
'updated_by_u': null,
'transaction_id_u': list.transactions_id,
'user_u': list.user,
'status_u': list.status
}
},
//end
//to update data
updateData(id) {
axios.post('/update/' + id, this.add_numbertype)
.then(function(response) {
if (response.status === 200) {
$('#updateModal').modal('hide');
document.getElementById("update-form").reset();
Swal.fire(
'Update',
'New record updated Successfully',
'success'
);
this.getData();
}
}).catch(function(error) {
console.log(error.response);
})
},
},
});
Vue.createApp(App).mount('#add');
</script>
1条答案
按热度按时间ar7v8xwq1#
addNumbertype方法中的代码有问题。在axios post请求的.then函数中，这不是引用Vue组件示例，而是引用函数作用域。这意味着.getData不会按预期工作，并将导致TypeError。要解决此问题，您可以使用arrow函数来保留其值。以下是更正后的代码：
另外，updateData方法中也有一个问题，它也引用了函数作用域，而不是Vue组件示例。同样的解决方案也可以应用在这里，使用一个箭头函数来保留它的值。下面是更正后的代码：