vue向数组中添加自定义属性并且修改属性时刷新视图_chengwei9975的博客-程序员宅基地

技术标签: json  javascript  

先看下面的图:

这里是想要点击一级标题来收缩与展开二级标题,这些数据时循环一个数组得到,解决办法是给这个数组的每一个对象中添加一个boolean类型的属性,点击的时候如果该属性为true,则变为false,如果原来是false,则变为true,通过这个属性来显示和隐藏二级内容。

<div v-for="(oneLevel, id) in contentList" :key="id">
      <div class="one-level" @click="isShowOrHide(id)">{
    {id+1}}、{
    {oneLevel.chapterTitle}}
      </div>
      <div v-show="contentList[id].isShow" class="two-level" v-for="(item, key) in oneLevel.lstCourseVideo" :key="key">
            <div>
              <el-button type="text" size="mini" @click="studyRecord(item)">查看</el-button>
            </div>
            </div>
      </div>
    </div>
  • 存储值的数组是contentList,自己添加的属性是isShow.
  • isShowOrHide(id)是点击一级标题的方法,通过该方法来改变自定义属性的值

向数组中添加属性

for (let i = 0; i < this.contentList.length; i++) {
        this.contentList[i] = Object.assign({}, this.contentList[i], { isShow: true });
      }

isShowOrHide()方法

let tempObj = this.contentList[id];
this.$set(tempObj, 'isShow', !tempObj.isShow);
this.$set(this.contentList, id, tempObj);

其实这里面难住自己的是修改数组里面的值的时候视图不会刷新,后来在网上搜索一番才知道是这样解决。可以参考下面链接中的文章 Object.assign的使用vue中数组修改属性不刷新视图解决方案

转载于:https://my.oschina.net/guowei11/blog/3089244

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/chengwei9975/article/details/100786624

智能推荐

随便推点