Vue component - template not displaying data

Question

I know this is a little vague but am seeing strange behaviour in my Vue component.

Component has a data object called "alertmsg" This appears in the template and will display when it has a success or error property. If I set alertmsg.success or alertmsg.error anywhere in my code it will display.

I am making an API call and when the response comes back from the server I populate either alertmsg.success or alertmsg.error. It WORKS....HOWEVER if I clear the alertmsg object BEFORE making the API call, then the values do NOT display (even though I can see that alertmsg.success/error was set).

I am taking a similar approach in the parent app and am not having any problems. Any idea what might be causing this?

Here is my component. I call the verifyEmail method and the alertmsg will ONLY show if I comment out _self.alertmsg = {}

Please advise!

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>'

})

probably a typical reactivity problem. use this.$set instead — Jacob Goh
– Jacob Goh, Commented May 17, 2018 at 13:54

Vitaly Migunov · Accepted Answer · 2018-05-17 16:15:01Z

1

Just do _self.alertmsg = {success: null, error: null} instead of _self.alertmsg = {} otherwise it won't be reactive.

answered May 17, 2018 at 16:15

Vitaly Migunov

4,4872 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue component - template not displaying data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related