Vue组件模板数据不显示求助：清空alertmsg后API返回值无法渲染

这个问题本质是Vue响应式系统的特性导致的，我来给你拆解清楚：

为什么清空对象后模板不更新？ #

你初始化时在data里定义的alertmsg是一个带有success和error属性的对象，Vue会在组件初始化时对这两个属性建立响应式追踪，所以直接修改这两个属性时模板能实时更新。

但当你执行_self.alertmsg = {}时，你把原来的响应式对象替换成了一个普通的空对象。之后你给这个空对象新增success或error属性时，Vue无法检测到这些新增属性的变化（Vue的响应式系统默认只追踪初始化时已存在的属性），所以模板自然不会更新。

父组件没有这个问题，大概率是因为父组件里没有直接替换整个alertmsg对象，而是一直操作初始的响应式对象的属性。

三种可行的解决方案 #

方案1：保留原响应式对象，只清空属性（最推荐）

不要替换整个对象，而是直接把原有属性设为null，这样响应式追踪不会中断：

verifyEmail: function(vericode) {
  var _self = this;
  // 替换清空对象的语句，改为清空属性
  _self.alertmsg.success = null;
  _self.alertmsg.error = null;

  this.$verifyEmail(this.session.userid,vericode).then(function(response) {
    _self.alertmsg.success = response.message || 'Your email address was successfully verified.';
  }, function(response) {
    console.log('Error sending very email',response);
    _self.alertmsg.error = response.message || 'Error verifying email address';
  });
}

方案2：替换成带有初始属性的响应式对象

如果一定要替换整个对象，确保新对象包含需要追踪的属性，这样Vue会自动为这些属性建立响应式：

verifyEmail: function(vericode) {
  var _self = this;
  // 替换成带有初始属性的对象，而非空对象
  _self.alertmsg = { success: null, error: null };

  this.$verifyEmail(this.session.userid,vericode).then(function(response) {
    _self.alertmsg.success = response.message || 'Your email address was successfully verified.';
  }, function(response) {
    console.log('Error sending very email',response);
    _self.alertmsg.error = response.message || 'Error verifying email address';
  });
}

方案3：用$set强制添加响应式属性

如果必须用空对象，后续添加属性时使用Vue的$set方法，强制让属性变成响应式：

verifyEmail: function(vericode) {
  var _self = this;
  _self.alertmsg = {};

  this.$verifyEmail(this.session.userid,vericode).then(function(response) {
    // 用$set添加响应式属性
    _self.$set(_self.alertmsg, 'success', response.message || 'Your email address was successfully verified.');
  }, function(response) {
    console.log('Error sending very email',response);
    // 同理处理error属性
    _self.$set(_self.alertmsg, 'error', response.message || 'Error verifying email address');
  });
}

总结 #

最推荐方案1，因为它最贴合Vue响应式的设计思路，代码也最简洁。方案2和3适合确实需要替换整个对象的场景，根据你的需求选择即可。

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