есть этот код
<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 и обновлю инструменты разработки, я увижу, что 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:
Начальная загрузка рефов
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
}
)
},
Он также объявлен в разделе Data.
Кстати, я добавил v-for a :key, но это ничего не изменило.
ref
или как вы добавляете дополнительные теги. - person thanksd   schedule 05.06.2017