vue $forceUpdate()强制刷新

改变列表的值 一直不渲染

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    :offset="10"
                    :immediate-check="false"
            >

                <div class="comp" v-for="(item,index) in tabledata">
                    <div class="cell"><span>组件名称：</span>{{item.component}}</div>
                    <div class="cell"><span>实例名称：</span>{{item.instance_name}}</div>
                    <div class="cell"><span>实例IP：</span>{{item.ip}}</div>
                    <div class="cell"><span>实例端口：</span>{{item.port}}</div>
                    <div class="cell expand" v-if="arrowlist[index]===false" @click="changeArrow(index)">
                        <span>
                            <span style="float: left">...</span><van-icon name="arrow-down"/>
                        </span>
                    </div>

                    <div class="cell" v-if="arrowlist[index]"><span>远程启停：</span>
                        <van-tag type="success" v-if="item.is_container">开启</van-tag>
                        <van-tag type="danger" v-else>关闭</van-tag>
                    </div>
                    <div class="cell" v-if="arrowlist[index]"><span>启停脚本：</span>{{item.script}}</div>
                    <div class="cell" v-if="arrowlist[index]"><span>日志路径：</span>{{item.logpath}}</div>
                    <div class="cell expand" v-if="arrowlist[index]"
                         @click="changeArrow(index)">
                        <span v-if="arrowlist[index]"><van-icon name="arrow-up"/></span>
                    </div>
                </div>

            </van-list>
        </van-pull-refresh>

 changeArrow(index) {
        this.arrowlist[index] = !this.arrowlist[index]
        this.$forceUpdate()
      },
      onSearch() {
        this.pageHelper.pageNo = 1
        this.loading = true
        this.tabledata = []
        this.fetchData()
        this.refreshing = false
      },
      fetchData() {
        const space = this.pageHelper
        space['search'] = this.search
        Api.QueryData(space).then(response => {
          const data = response.data
          this.totalSize = response.recordsTotal
          this.loading = false;
          if (data.length < this.pageHelper.pageSize || data.length === 0) {
            // 数据小于10条，已全部加载完毕finished设置为true
            this.finished = true;
          }
          this.tabledata = this.tabledata.concat(data)
          this.arrowlist = this.tabledata.map(() => false)
          console.log(this.arrowlist.length)
        })
      },

 

后来   ，发现加上强刷就好了

this.$forceUpdate()

vue强制更新$forceUpdate()

添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。