Блог

У каждого объекта в reviews массиве есть вызываемое свойство isActive , для которого по умолчанию установлено значение false . Нажатие на элемент «Показать больше» <p> переключает isActive для этого конкретного элемента массива с false на true и наоборот, но по какой-то причине элементы, которые должны появляться и исчезать в зависимости от значения этого свойства, не работают должным образом.

Console.log(this.reviews) в моей функции печатает обновленный массив, и, похоже, все в порядке. Однако свойства элементов, на которые нажал пользователь isActive , изменились, однако v-ifs этого не отражают.

Я делаю что-то не так?

 <template>
<div v-for='(review, index) in reviews' class="review-container">
    <div class="review-info-container">
        <p>{{ review.text.slice(0,240) }}
            <span class='read-more-dots' v-show='!review.isActive' v-if='review.text.length > 240'>...</span>
            <span v-show='review.isActive' class='extra-text'>{{ review.text.slice(240) }}</span>
        </p>
        <p v-show='!review.isActive' @click='showMoreLess(index)'>Show more</p>
        <p v-show='review.isActive' @click='showMoreLess(index)'>Show less</p>
    </div>
</div>
</template>
 

И моя showMoreLess() функция:

 showMoreLess(index){
    if (this.reviews[index].isActive) {
        this.reviews[index].isActive = false;
    } else {
        this.reviews[index].isActive = true;
    }
    console.log(this.reviews)
}