我正在将对象属性的值从false更改为true，但我的v-show条件并未反映出这一点
我正在将对象属性的值从false更改为true，但我的v-show条件并未反映出这一点
提问于 2019-04-17 00:57:11
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)
}
回答 1
Stack Overflow用户
发布于 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)
}
有关详细信息，请查看官方文档
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006630
复制相关文章
相似问题