Question

我在第一部分中使用$refs.height[index].offsetTop来计算相同的值，但$ refs.height位于第二部分，在第一部分之后呈现，因此重新加载页面有错误TypeError: Cannot read property '0' of undefined。

我尝试评论<div>{{showNumber(index)}}</div>，然后run npm dev，然后重新推荐，这是有用的。

如何首先渲染第2部分？

<template>
  <div id="app">
    //1st part 
    <div id="catalog">
      <div v-for="(baike,index) in baikes">
        <div class="catalog">
          <h2>{{index+1}}.{{baike.name}}</h2>
          <hr style="border:1px dashed #000; flex-grow: 1">
          <div>{{showNumber(index)}}</div>
        </div>
      </div>
    </div>

    //2rd part
    <div id="content">
      <div v-for="(baike,index) in baikes" ref="height">
        <h3 >{{index+1}}.{{baike.name}}</h3>
        <p>{{baike.abstract}}</p>
        <ul v-for="(info,key,index) in baike.info">{{key}}-{{info}}</ul></ul>
      </div>
    </div>

  </div>
</template>

<script>
import baikeJSON from '../../items.json'

export default {
  name: 'app',
  data () {
    return {
      baikes: baikeJSON,
    }
  },
  methods:{
    showNumber(i){
      return Math.ceil(this.$refs.height[i].offsetTop/1000)
    }
  },
}
</script>

Answer 1

切换位置的第2部分和第1部分然后添加css

#app{
    display:flex;
    flex-direction:column-reverse;
}

如何在Vue文件中异步渲染dom？

1 个答案: