@Analka

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

Подскажите, как заставить выполниться условие 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 => {
                        });
                }
            },
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
this.nextTick

Да ну?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
bingo347
@bingo347
Бородатый программер
OMG... упаси меня Боже зайти на сайт сделанный Вами...
Нет, конечно можно Вам подсказать решение проблемы, но Вы вряд ли поймете, Вы ведь даже с документацией фреймворка ознакомится не удосужились, при том что она имеет нормальный перевод...

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы