Question

拥有此代码

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

它基本上是悬停时的弹出窗口。它工作正常，但是当我添加一个新的“标签”时，虽然我看到新标签已添加到屏幕上，但悬停不起作用。

当我查看vue devtools时，我可以看到，对于原始标记，true和false会动态更改，而新标记则不会。虽然，如果我删除mouseleave事件并刷新devtools，我可以看到tag.pop确实变为true。如果我将鼠标悬停在其中一个旧的弹出窗口上，那么我认为这是一个变化检测问题。

我尝试将mouseenter更改为$ set（标签，'pop'，true），但所有内容都采用相同的方式。我也尝试使用$ set来添加新标签，即使标签已渲染到屏幕中，但仍未改变。

我不知道还能做什么，有什么建议吗？

编辑：添加新标签的代码：

    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='';
            },

编辑2：

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
                }
            )
        },

它也在数据部分中声明。

BTW我添加了 v-for 一个：key ，但它没有改变任何内容。

Answer 1

在添加标记后尝试执行此。$ forceUpdate（）并查看它是否正确呈现。

Answer 2

感谢感谢

我刚刚复制了我将第一个标签添加到添加标签功能的方式，现在它工作正常。

使用现有对象的某些东西可能会使它首先停止工作。创建标签作为修复它的新对象。

这可能是一种更好的编码方式。

vuejs v-bind：v上的类 - 不更新

2 个答案: