关于v-for的歌手数据渲染问题

Question

开始可以正常渲染，浏览器刷新后，无法正常渲染

代码：

正常渲染：

刷新后：

尝试在mouted的时候调用this.forceUpdate()但是无效，将图片，歌手名字写完整也是无法完整渲染的，希望老师解答。

Answer 1

提问者 湫梨花颂歌 2020-08-24 20:26:32

异步获得数据的原因，先渲染了dom，我在获得数据的代码中加了一个isReady，然后传给子组件，要渲染的子组件外层添加一个v-if="isReady"就解决了。各位遇到同样问题的同学，可以参考我这个解决方案/。

Ps:太坑了，花了好长好长时间，因为vue工具是显示有数据的，所以我一直以为数据获得没有问题。

Answer 2

ustbhuangyi 2020-08-23 12:12:54

组件完整代码贴一下

• 提问者 湫梨花颂歌 #1

  <template>
    <scroll :scroll-y="true" class="listennerView">
      <ul>
       <li v-for="(value,key,index) in data">
         <h2>{{key}}</h2>
       </li>
      </ul>
    </scroll>
  </template>
  
  <script>
    import Scroll from "../scroll/Scroll";
    export default {
      name: "listenerView",
      components: {Scroll},
      props:{
        data:{
          type:Object,
          default:{}
        }
      },
      created() {
        this.$forceUpdate()
      },
      mounted() {
  
      }
    }
  </script>
  
  <style scoped  rel="stylesheet/stylus">
  
  </style>

• 提问者 湫梨花颂歌 #2

  <template>
    <div class="wrap" ref="wrap">
      <slot></slot>
    </div>
  </template>
  
  <script>
    import BScroll from "better-scroll"
    export default {
      name: "Scroll",
      props:{
        click:{
          type:Boolean,
          default:true
        },
        probeType:{
          type: Number,
          default: 3
        },
        scrollX:{
          type:Boolean,
          default:false
        },
        scrollY:{
          type:Boolean,
          default:false
        },
        data:{
          type:Object,
          default:null
        },
        refreshDelay:{
          type:Number,
          default:20
        }
      },
      methods:{
        _initScroll(){
          this.scroll = new BScroll(this.$refs.wrap,{
            click: this.click,
            probeType: this.probeType,
            scrollX: this.scrollX,
            scrollY: this.scrollY
          })
        },
        refresh(){
          this.scroll && this.scroll.refresh();
        }
      },
      mounted() {
        this._initScroll()
      },
      watch:{
        data(){
          setTimeout(() => {
            this.refresh()
          },this.refreshDelay)
        }
      }
    }
  </script>
  
  <style scoped>
  
  </style>

• ustbhuangyi 回复 提问者 湫梨花颂歌 #3

  这个阅读性太差了，你把代码传到 GitHub 上，我抽空帮你看看吧

点开查看后面4条评论