How to change button text in vue loop?

Question

Vue.js

Good afternoon. I know vue, I don't know how to make the "Read More" button change in a loop. The this context is lost there and I am in a stupor.
There is a list that displays reviews from an array of objects.

<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>

Without the loop I would make it through to the computer

btnText: function() {
            if (this.review.isShown) {
                return 'Свернуть'
            }
            return 'Читать дальше'
        },

, but in a loop, of course, it does not exit due to loss of context. Help, plz.

Answer 1

It doesn’t work for you because you don’t have this.review object but have this.reviews, either make a separate component for each review, or use a ternary a separate component, or a ternary, but I'm not sure that it will react to changes, but it's worth a try
{{ review.isShown ? 'Свернуть' : 'Читать далее' }}