jQuery Ajax回调似乎调用了错误的实例的类方法
我有一个带有Vuex商店的Vue实例。Vue组件可以调用Vue实例上的方法，以确保某些对象存在于Vuex存储中。每个对象都存储为一个类ApiObject的实例。如果只知道对象的ID，那么将通过jQuery Ajax请求从服务器拉取该对象。
出现以下问题：
我有两个对象I分别为"0d3f7f10“和"f6a7d150”的ApiObjects。第一个已经存在于Vuex商店中，但是第二个只能通过它的id知道，因此触发了一个Ajax reqeuest。
id为"f6a7d150“的对象启动ajax请求，命中正确的端点(/api/v1/f6a7d150)，然后命中回调函数，这是ApiObject类的一个方法。
但是当回调被调用时，我突然进入了错误的ApiObject实例。我希望我调用的是ApiObject“f6a7d150”的回调方法，但我遇到的是“0d3f7f10”的回调方法。
这就是API调用和回调方法：
refresh () {
console.log('Calling ' + this.id);
jQuery.ajax({
context: this,
url: this.url(),
method: 'GET',
success: this.handleApiResult
})
}
handleApiResult (result) {
console.log('Handling ' + this.id);
this.data = result['data'];
}预期的控制台输出为：
Calling f6a7d150
Handling f6a7d150但它实际上是：
Calling f6a7d150
Handling 0d3f7f10handleApiResult中的result变量保存了ID为"f6a7d150“的正确对象，所以直到API调用之前，我们都在正确的实例中。
当我转储Vuex Store时，有两个ID为"0d3f7f10“的对象，一个有数据，另一个(我们刚刚从API中取出的那个)没有数据，所以只知道它的ID。
Vue组件在我的Vue实例上使用这些方法在Vuex中创建对象。控制台日志报告创建了ID为"f6a7d150“和"0d3f7f10”的对象，所以我不知道我的存储区中为什么没有ID为"f6a7d150“的对象。
ensureObject (type, id, data) {
if (!type || (!id && !data)) {
return;
}
if (!id) {
id = data.id;
}
if (this.$store.state[type].filter(o => o.id === id).length < 1) {
console.log("Creating " + id);
this.$store.state[type].push(new CiliatusObject(type, id, data));
}
},
ensureObjects (type, ids, data) {
if (!ids && !data) {
return;
}
if (!ids) {
data.forEach(obj => this.ensureObject(type, null, obj));
}
else {
let that = this;
ids.forEach(function (id) {
that.ensureObject(
type,
id,
data ? data.filter(o => o && o.id === id)[0] : undefined
)
});
}
}任何建议都将不胜感激。
回答 1
Stack Overflow用户
发布于 2018-02-18 10:17:24
好吧，我是在用头撞墙几个小时后找到的。
在Vue组件的计算属性中，有这样一行：
let obj = this.$store.state.filter(s => s.id = this.id);
注意您所期望的===所在的=.
https://stackoverflow.com/questions/48850290
复制
腾讯云开发者
