通过Tab切换效果的例子解决vue中数组更新后视图不刷新问题

最新推荐文章于 2024-08-12 09:32:01 发布

XIPIKER

最新推荐文章于 2024-08-12 09:32:01 发布

阅读量1k

点赞数 1

分类专栏：前端开发文章标签： js vue

本文链接：https://blog.csdn.net/qq_25040155/article/details/107406717

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

故事背景

开发中我们比如做Tab页切换效果，思路是首先声明一个数组Arr，每个Tab标签对应一个数组下标存着Tab选中的状态，arr[true, false, false, false, false]，然后去根据Tab选中的下标去更改数组Arr的值为true，但是问题出现了，为什么我触发了更新数组方法而视图没有改变呢(PS:VUE中)。以下代码做了错误还原以及解决方法Object.assign({}, this.XXX, arr)或者用数组的push方法也可以解决这个问题，为什么会发生这个呢，没仔细研究，感觉是内存地址没有发生变动或者是数组的set方法没有被触发，总之解决了，欢迎讨论。

以下伪代码仅供参考使用

data () {
    return {
        tabStatus: [true, false, false, false, false]
    }
},
methods: {
    setTabStatus(index) {
        let arr = [];
        for(let i = 0; i < 4; i++) {
            if(index === i) {
                arr.push(true);
            }else {
                arr.push(false);
            }
        }
        // 这里是原先错误的方式
        // this.tabStatus = arr;
        // 这个是正确的方式
        this.tabStatus = Object.assign([], this.tabStatus, arr)
    }
}

模板代码

<div class="tab-time-st row">
  <span @click="setTabStatus(0)" :class="tabStatus[0] ? 'in' : ''">近24H</span>
  <span @click="setTabStatus(1)" :class="tabStatus[1] ? 'in' : ''">近7天</span>
  <span @click="setTabStatus(2)" :class="tabStatus[2] ? 'in' : ''">近1月</span>
  <span @click="setTabStatus(3)" :class="tabStatus[3] ? 'in' : ''">近3月</span>
  <span @click="setTabStatus(4)" :class="tabStatus[4] ? 'in' : ''">近半年</span>
</div>

css代码用的是scss

.row{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tab-time-st{
  position: absolute;
  top: 380px;
  width: 100%;
  height:34px;
  line-height: 34px;
  font-size:12px;
  font-weight:400;
  background: #F9FAFA;
  color:rgba(153,153,153,1);
  text-align: center;
  span{
    flex: 2;
    height: 34px;
    border: 1px solid #E6E8EA;
  }
  span:nth-child(1), span:nth-child(2), span:nth-child(3), span:nth-child(4){
    border-right: 0px;
  }
  .in{
    border: 0px 0px 0px;
    color: #333;
    height:32px;
    line-height: 32px;
  }
}