vuejs v-bind: класс на v-для не обновления

есть этот код

<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, но это ничего не изменило.


person JollyGood    schedule 05.06.2017    source источник
comment
Добавьте код, где вы заполняете ref.tags   -  person Max    schedule 05.06.2017
comment
Я не могу воспроизвести это. См. эту скрипту: jsfiddle.net/t7e2b1sk   -  person thanksd    schedule 05.06.2017
comment
Может потому, что он вложен для меня? У меня есть this.selected.refs[x].tags   -  person JollyGood    schedule 05.06.2017
comment
Да, может быть. Мы не можем сказать, потому что не знаем, как установлена ​​ваша переменная ref или как вы добавляете дополнительные теги.   -  person thanksd    schedule 05.06.2017


Ответы (2)


Попробуйте выполнить this.$forceUpdate() после добавления тега и посмотрите, правильно ли он отображается.

person eduedu87    schedule 05.06.2017

Благодаря спасибо

Я просто скопировал способ добавления первых тегов в функцию добавления тегов, и теперь он работает нормально.

Что-то в использовании уже существующего объекта, вероятно, помешало ему работать в первую очередь. создание тега как нового объекта исправило это.

Вероятно, это был лучший способ закодировать его в первую очередь.

person JollyGood    schedule 05.06.2017