vue 改变对象数组中的布尔值，值不变

Question

this.diaryInfoList.forEach((item)=>{

item.showText = false;
item.showBtn = false;
item.showBtnText = false;

})

数据格式是：
let list= [

{xxx:xxx},
{xxx:xxx}

]

下面是我使用的方法，都无效↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
第一种：
this.diaryInfoList[i].showBtn = true;
this.diaryInfoList[i].showText = true;
this.diaryInfoList[i].showBtnText = true;
this.$forceUpdate()

第二种：
this.$set(this.diaryInfoList[i], "showBtn", true)
this.$set(this.diaryInfoList[i], "showText", true)
this.$set(this.diaryInfoList[i], "showBtnText", true)

Answer 1

this.diaryInfoList.map((item) => {
    this.$set(item,'showText', true)
    this.$set(item,'showBtn ', true)
    this.$set(item,'showBtnText ', true)
    return item;
})

Answer 2

this.$set(this.diaryInfoList, i, {
  showBtn: true,
  showText: true,
  showBtnText: true
})

Answer 3

this.diaryInfoList.forEach((item) => {
    this.$set(item,'showBtn',true);
    this.$set(item, "showText", true);
    this.$set(item, "showBtnText", true)
})

参考:demo。

Answer 4

跟同上同理，让 Vue 对 diaryInfoList 的新数据做监听

this.diaryInfoList = this.diaryInfoList.map((item) => {
    item.showText = false;
    item.showBtn = false;
    item.showBtnText = false;
    
    return item;
})