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)
}
发布于 2019-04-17 10:40:43
尝试使用this.$set
如下函数:
showMoreLess(index){
if (this.reviews[index].isActive) {
this.reviews[index].isActive = false;
this.$set(this.reviews,index,this.reviews[index].isActive)
} else {
this.reviews[index].isActive = true;
this.$set(this.reviews,index,this.reviews[index].isActive)
}
console.log(this.reviews)
}
有关详细信息,请查看官方文档
https://stackoverflow.com/questions/-100006630
复制相似问题