vue.js - Vuejs - 调用方法函数时未定义
问题描述
在VUE组件JS下面使用,在ajax成功内调用“deleteuserParticulars”函数。但是,没有定义获取“deleteuserParticulars”。
不确定我错过了哪一个并打了这个电话。可以帮助尽快解决这个问题吗?谢谢
import Vue from 'vue';
const userComponent = Vue.component('user-form-component', {
template: componentHTML(),
props: ['saveddata'],
components: {
userParticularsModalComponent
},
data: function () {
return {
userDetails: []
}
},
methods: {
deleteuser: function (newUser) {
let deleteDraftEndpointUrl = $('.main-component').attr('data-delete');
$.ajax({
url: deleteDraftEndpointUrl + newUser['draftId'],
type: 'GET',
success: function(s) {
if(s.status == 'success'){
this.deleteuserParticulars();
}
},
error: function(){
console.log('Error on delete user', error);
}
});
},
deleteuserParticulars: function(){
this.userDetails = this.userDetails.filter((user) => (user['info'].PP !== newuser['info'].PP);
this.userAllDetails = this.userDetails;
this.$emit('user', this.userDetails);
}
},
mounted: function () {
},
updated: function () {
console.log('U', this.waitForUpdate);
}
});
export default userComponent;
解决方案
您需要使用胖箭头功能来摆脱this
范围。试试这个片段
import Vue from 'vue';
const userComponent = Vue.component('user-form-component', {
template: componentHTML(),
props: ['saveddata'],
components: {
userParticularsModalComponent
},
data: function () {
return {
userDetails: []
}
},
methods: {
deleteuser: function (newUser) {
let deleteDraftEndpointUrl = $('.main-component').attr('data-delete');
$.ajax({
url: deleteDraftEndpointUrl + newUser['draftId'],
type: 'GET',
success: (s) => { // the fix is here
if(s.status == 'success'){
this.deleteuserParticulars();
}
},
error: function(){
console.log('Error on delete user', error);
}
});
},
deleteuserParticulars: function(){
this.userDetails = this.userDetails.filter((user) => (user['info'].PP !== newuser['info'].PP);
this.userAllDetails = this.userDetails;
this.$emit('user', this.userDetails);
}
},
mounted: function () {
},
updated: function () {
console.log('U', this.waitForUpdate);
}
});
export default userComponent;
推荐阅读
- c# - 如何使用 NLog 将日志记录范围包含到日志文件中
- publish-subscribe - google.api_core.exceptions.ServiceUnavailable:超过 503 截止日期
- javascript - 对数组进行排序以对匹配元素进行分组但保持原始顺序
- select - 选择:限制所选选项的数量
- java - Android 资源 - 从语音包中检索随机语音线路
- python - pymc3 重载阶跃函数
- python - 选择 Pandas DataFrame 的第二个 MultiIndex 级别作为索引器
- oracle - 无法跟踪从 Weblogic 到 Oracle 的问题
- javascript - 在 P5.js 中更改坐标系
- typescript - 如何在 Typescript 中使 setter 成为可选?