vuejs v-bind:class on a v-for not updating

Question

have this code

<span v-for="tag in ref.tags" @mouseenter="tag.pop=true;tag.adjust($event)" @mouseleave="tag.pop=false" >
    <span  :class="tag.pop? 'ref-tag-pop' : 'tag'">@{{tag.name}}</span>
    <div v-show="tag.pop">@{{tag.info}}</div>
</span>

It's basically a popup on hover. It works fine, but when I add a new "tag", although I see the new tag added to screen, the hover isn't working for it.

When I look in the vue devtools I can see that for the original tags the true and false change dynamically while the new tag doesn't. Although, if I remove the mouseleave event and refresh the devtools I can see the tag.pop does change to true. If I then hover over one of the old ones both old and new popups show up, so I think it's a change detection problem.

I tried to change the mouseenter to $set(tag,'pop',true), but everything is acting the same way. I also tried to use the $set for the adding of the new tag, even though the tag was rendered into screen, but still, nothing changed.

I'm not sure what else to do, any suggestions?

Edit: Code for adding a new tab:

    submitTab: function(){
            this.form="";
            this.addedObj.name=document.getElementById("fNewTagTitle").value;
            this.addedObj.info=document.getElementById("fNewTagInfo").value;
            if (!this.isEditMode)
                this.isEditMode=true;
            this.editMode.add.tags.push(this.addedObj);
            this.addedObj.pop=false;
            this.addedObj.adjust= function(event) {
                left=event.target.offsetLeft;
                div=event.target.lastChild;
                div.style.left = -left+14+"px";
            };
            ref= this.addedObj.tagRef;
            delete this.addedObj.tagRef;
            this.$set(ref.tags,ref.tags.length, this.addedObj);

            this.addedObj='';
            },

Edit 2:

Initial load of refs

        loadRefs:function(){
            this.$http.get(this.url + "/refs").then(
                function (result) {
                    data = JSON.parse(result.body);
                    var last =0;
                    for  (item of data){
                        if (item.ref_id!= last){
                            if (last!=0)
                                this.refs.push(ref);
                            var ref = new Object();
                            ref.show=false;
                            ref.refId=item.ref_id;
                            ref.type=item.ref_type_id;
                            ref.title=item.title;
                            ref.author=item.author;
                            ref.edition=item.edition;
                            ref.source=item.source;
                            ref.date=item.date;
                            ref.journal=item.journal;
                            ref.year=item.year;
                            ref.page=item.page;
                            ref.publisher=item.publisher;
                            ref.outlet=item.outlet;
                            ref.undersigned=item.undersigned;
                            ref.representing=item.representing;                         
                            ref.URL=item.URL;
                            ref.created_at=item.created_at;
                            ref.username=item.username;
                            ref.score=item.score;
                            ref.support=item.pivot.support;                                 
                            ref.tags=[];                
                        }
                        ref.tags.push({ name:item.tag_name, info: item.tag_info, pop:false, adjust: function(event) {
                            left=event.target.offsetLeft;
                            div=event.target.lastChild;
                            div.style.left = -left+14+"px";
                         }, });
                        last=item.ref_id;
                    }
                    if (data.length>0)
                        this.refs.push(ref);
                },
                function(result) {
                    alert( "error" );//XXX add error function
                }
            )
        }, 

It's also declared in the Data section.

BTW I added the v-for a :key but it didn't change anything.

Answer 1

添加标签后，尝试执行this。$ forceUpdate（），看看它是否正确呈现。

Answer 2

Thanks to thanksd

I just copied the way I added the first tags to the add tag function, and now it works fine.

Something about using an already existing object probably stoped it from working in the first place. creating tag as a new object fixed it.

It was probably a better way to code it in the first place.