Vue组件-模板不显示数据

Question

我知道这有点含糊，但在我的 Vue 组件中看到了奇怪的行为。

组件有一个名为“alertmsg”的数据对象 这出现在模板中，并在它具有成功或错误属性时显示。 如果我在代码中的任何位置设置 alertmsg.success 或 alertmsg.error ，它将显示。

我正在进行 API 调用，当响应从服务器返回时，我会填充 alertmsg.success 或 alertmsg.error。 它可以工作....但是，如果我在进行 API 调用之前清除 alertmsg 对象，则不会显示这些值（即使我可以看到设置了 alertmsg.success/error）。

我在父应用程序中采用了类似的方法，没有遇到任何问题。 知道是什么原因造成的吗？

这是我的组件。我调用 verifyEmail 方法，只有当我注释掉 _self.alertmsg = {}

时才会显示 alertmsg

请指教！

Vue.component('alert-messages', {
    props: ['session'],
    mixins: [dataServiceMX,utilServiceMX],
    data: function () {
        return {
            alertmsg: {success: null, error: null},
        }
    },
methods: {

    verifyEmail: function(vericode) {


        var _self = this;
       _self.alertmsg = {};  //IF I COMMENT THIS OUT THEN IT WORKS                         
      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';

        });
    }
},
template: '<div class="row">\n' +
'                    <div class="col-sm-12">\n' +
'                       <div v-for="warnMsg in warnMessages" class="alert-warning" ><span v-html="warnMsg.text"></span><a v-if="warnMsg.action" @click="alertAction(warnMsg.action)">{{warnMsg.actionText}}</a> <a class="pop_close" ><i class="fa fa-times"></i></a></div>\n' +
'                       <div v-for="errorMsg in errorMessages" class="alert-error"><span v-html="errorMsg.text"></span><a v-if="errorMsg.action" @click="alertAction(errorMsg.action)">{{errorMsg.actionText}}</a> <a class="pop_close" ><i class="fa fa-times"></i></a></div>\n' +
'                       <div v-if="alertmsg.success" class="fadeInDown top__element animated success_message"><i class="fa fa-check-circle-o"></i> <span v-html="alertmsg.success"></span></div>\n' +
'                       <div v-if="alertmsg.error" class="fadeInDown top__element animated error_message"><i class="fa fa-exclamation-triangle"></i><span v-html="alertmsg.error"></span></div>\n' +
'                    </div>\n' +
'                </div>'

})

Answer 1

只需使用_self.alertmsg = {success: null, error: null} 而不是_self.alertmsg = {} 否则它不会反应。