Как обновить дерево Vue.js?

Question

[Analka]

Подскажите, как заставить выполниться условие if item.checkVideo

<div class="tabs--item youtube" v-bind:class="{is_active:item.xtype === 2}">
	<div class="item pos-r" v-if="item.checkVideo === false">
		<p class="upload--title">Добавить ссылку из YouTube:</p>
		<span class="upload--description">Вы должны добавить id видео. Пример 29Pm5QrkhJw</span>
		<input type="url" v-model="item.video" v-on:blur="checkYoutube(index)" placeholder="Ссылка на видео из YouTube">
		<span class="help--info" v-if="helpInfo">Вставьте ссылку на видеоролик из YouTube</span>
	</div>
	<div class="item pos-r" v-if="item.checkVideo">
		<iframe width="100%" height="315" :src="'https://www.youtube.com/embed/'+item.video" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		<button type="button" class="btn-remove" @click.prevent="deleteVideo(index)">
			<svg><use xlink:href="#crash"></use></svg>
		</button>
	</div>
</div>

если я удалил видео, а потом загрузил новое, то видео не появляется

checkYoutube(x) {
                const el = this.forms.find((f, idx) => idx === x);
                if (el) {
                    axios.post('/add/download', {type: 1, video: el.video})
                        .then((response) => {
                            if (response.data.error == 0) {
                                toast.fire({
                                    type: 'success',
                                    title: response.data.message
                                });
                                this.addDisabledTab(x);
                                this.nextTick(() => {
                                    el.checkVideo = true;
                                });

                            } else {
                                toast.fire({
                                    type: 'error',
                                    title: response.data.message
                                });
                            }
                        })
                        .catch(error => {
                        });
                }
            },

Answer 1

[0xD34F]

this.nextTick

Да ну?

Comments

[Analka]

так?

this.addDisabledTab(x);
el.checkVideo = true;
this.$nextTick();

[0xD34F]

Analka, убил бы. Протрите глаза и посмотрите, что пытаетесь вызывать вы, и как метод называется на самом деле.

UPD. Вижу, начали втихаря переправлять комментарий, меняя тем самым смысл моего. Не надо так делать.

[Analka]

0xD34F, я делал вот так, но все ровно

this.$nextTick(function () {
        el.checkVideo = true;
})

[0xD34F]

Analka, checkVideo изначально присутствует в объекте?

[Analka]

data: function(){
            return {
                forms:[]
            }
        },
        mounted(){
            let element  = {
                title: '',
                description: '',
                image: '',
                video: '',
                xtype: 1,
                checkVideo: false,
            };
            this.forms.push(element);
            this.getArticle();
        },

getArticle(){
                const that = this;
                axios.post('/cabinet/edit/post', {id:this.id})
                    .then((response) => {
                        console.log(response.data.tags);
                        this.artilcle.title = response.data.article.title;
                        this.artilcle.description = response.data.article.description;
                        this.is_numeric = response.data.article.is_numeric;
                        this.forms = response.data.galleries;
                        $(this.forms).each(function (index,value) {
                           if (value.video){
                               value.checkVideo = true;
                           }else{
                             value.checkVideo = false;
                           }
                        });
                        if (response.data.article.source != null && response.data.article.source != '') {
                            this.sourceRadio = 1;
                            this.sourceArticle = response.data.article.source;
                        }
                        let tg = response.data.tags;
                        $(tg).each(function(index,value ) {
                            that.tagsselect.push(value.tag_id);
                        });

                    })
                    .catch(error => {})
                    .finally(()=>{
                        that.findDisabledTab();
                    });
            },

[0xD34F]

Analka, это так сложно - ответить да/нет?

[Analka]

0xD34F, да

[0xD34F]

Analka, что "да"? Сложно ответить или свойство есть?

[Analka]

0xD34F, в базе этого поля нет, при инициализации компонента, я добавляю это свойство в массив forms

[0xD34F]

Analka, ну, попробуйте тогда

this.$nextTick(() => this.$set(el, 'checkVideo', true));

или попробуйте заменить

this.forms = response.data.galleries;
$(this.forms).each(function (index,value) {
    if (value.video){
        value.checkVideo = true;
    }else{
        value.checkVideo = false;
    }
});

на

response.data.galleries.forEach(n => n.checkVideo = !!n.video);
this.forms = response.data.galleries;

[Analka]

0xD34F, сработало вот это

response.data.galleries.forEach(n => n.checkVideo = !!n.video);
this.forms = response.data.galleries;

а можете пояснить из-за чего? потому что в массив мы уже добавляем значение checkVideo ? и оно становиться реактивным?

и вот эта запись n => n.checkVideo = !!n.video эта короткая запись if true/false?

[0xD34F]

Analka, чтобы реактивность заработала, свойства должны присутствовать изначально. Вы сначала закидывали массив объектов в компонент, а уже потом добавляли объектам свойства. Здесь наоборот - сначала добавляются свойства, затем массив добавляется в компонент.

"Эта запись" - двойное отрицание, приведение значения выражения к его логическому эквиваленту.

Answer 2

[Дмитрий Беляев]

OMG... упаси меня Боже зайти на сайт сделанный Вами...
Нет, конечно можно Вам подсказать решение проблемы, но Вы вряд ли поймете, Вы ведь даже с документацией фреймворка ознакомится не удосужились, при том что она имеет нормальный перевод...

Я попробую все же подсказать:
Реактивные данные должны быть задекларированы в data, ну или в крайнем случае можно сделать незадекларированные данные реактивными через Vue.set

И пожалуйста, не делайте так:const el = this.forms.find((f, idx) => idx === x);Скажите мне, зачем? Зачем нужно гонять ЦИКЛ ради того что бы достать элемент массива по индексу?const el = this.forms[x];даст абсолютно аналогичный результат, но не сожрет кучу тактов моего процессора...

А вообще, бросайте Вы это программирование. Не Ваше это!

Comments

[Analka]

я и не пишу, что спец в vue, был бы знающим, не задавал вопросы, а обо...ть может каждый