Vueファイルの非同期レンダリングの方法は？

Question

私は同じ値を計算するのに最初の部分で$refs.height[index].offsetTopを使いますが、$ refs.heightは2番目の部分にあり、1番目の部分の後にレンダリングされるので、リロードページにエラー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

スイッチ2RD部分と位置の第一の部分は、CSS

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