Laravel+Vue2+Pusher栈中Pusher触发事件后前端数据不更新如何解决

• this指向错误：Pusher事件绑定的回调使用了普通匿名函数，函数内部的this指向Pusher回调上下文，而非Vue实例，赋值操作没有作用到Vue的data属性上，自然无法触发视图更新。
• 边界风险：初始price定义为空字符串，若Pusher推送早于fetchPrice接口返回，此时赋值this.price.value会直接报错，也会导致更新失败。

方案1：修改为箭头函数（推荐） #

箭头函数会继承外层作用域的this指向，直接绑定到Vue实例，修改created中Pusher事件绑定的代码即可：

// 替换原有的channel.bind代码
channel.bind("price-raise", (data) => {
  this.price.value = data.price;
});

方案2：提前保存Vue实例指向 #

也可以在进入created生命周期时提前存储Vue实例的this，回调中使用存储的实例操作数据：

created() {
  const vm = this; // 顶部先存储Vue实例
  // 其他原有代码保持不变
  channel.bind("price-raise", function (data) {
    vm.price.value = data.price;
  });
}

为了避免fetchPrice接口返回慢、Pusher先推送数据时出现赋值报错，建议初始化price时就对齐后续使用的结构，保证响应式正常：

data() {
  return {
    auction: null,
    price: {value: 0}, // 初始定义为带value属性的对象
    newPrice: null,
  };
}

内容的提问来源于stack exchange，提问作者UnhappyLunchtime