@slagoris

Как менять текст кнопки в цикле vue?

Добрый день. Познаю vue, не знаю как сделать изменение кнопки "Читать далее" в цикле. Там теряется контекст this и я в ступоре.
Есть список, который выводит отзывы из массива объектов.
<li class="reviews__item" v-for="review in reviews" :key="review.item">
									<div class="reviews__item_header">
										<div class="guest-img">
											<img :src="require(`../assets/images/for markup/${review.imgSrc.toLowerCase()}.png`)" alt="Фото гостя">
										</div>
										<div class="header-wrap">
											<div class="guest-name">{{ review.guestName }}</div>
											<div class="date">{{ review.date }}</div>
										</div>
									</div>
									<p class="reviews__item_text" :class="{ shown: review.isShown }">
										{{ review.text }}
									</p>
									<div class="read-more-btn" @click="review.isShown = !review.isShown">читать дальше</div>
								</li>

Без цикла я бы сделал это через к компьютед
btnText: function() {
            if (this.review.isShown) {
                return 'Свернуть'
            }
            return 'Читать дальше'
        },

, но в цикле, естественно, не выходит из-за потери контекста. Помогите, плиз.
  • Вопрос задан
  • 156 просмотров
Решения вопроса 1
@MEDIOFF
Python Developer
У вас не получается потому что у вас нет объекта this.review а есть this.reviews, либо делайте отдельный компонент для каждого review, либо тернарник используйте
{{ review.isShown ? 'Свернуть' : 'Читать далее' }}

Правка: Соре не увидел что вы бы так сделали а не сделали, ну выход тот же, либо отдельный компонент, либо тернарник, но не уверен что он будет реагировать на изменения, но попробовать стоит
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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