有这个代码
<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 时，我可以看到原始标签的真假动态变化，而新标签则没有。虽然，如果我删除 mouseleave 事件并刷新 devtools，我可以看到 tag.pop 确实更改为 true。如果然后我将鼠标悬停在旧弹出窗口和新弹出窗口中的一个上，那么我认为这是一个更改检测问题。
我试图将 mouseenter 更改为 $set(tag,'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
}
)
},
它也在数据部分中声明。
顺便说一句，我添加了v-for a :key但它没有改变任何东西。