vue如何解决this.refs拿取v-for下元素undefine问题

<el-card  class="box-card" shadow="hover" v-for="(moodEssayDate,index) in moodEssayDates" :key="moodEssayDate.pk_moodEssay">
       <div class="card">
         <div class="cardLeft">
           <el-avatar src=" //img.jbzj.com/file_images/article/201310/20131008165929119.jpg"></el-avatar>
           <swingingPendant class="swingingPendant" v-show="!isLogin"></swingingPendant>
         </div>
         <div class="cardCenter">
           <div class="cardCenterHeader">
             <div class="articleTitle"><label>{{moodEssayDate.essayTitle}}</label></div>
             <span><i class="el-icon-time"></i>{{moodEssayDate.ts}}</span>
           </div>
           <div class="cardCenterBody">
             <div class="cardCenterBodyTop">
               <div :class="[moodEssayDate.isAll?'articleContent':'articleContent2']"  ref="articleContent">{{moodEssayDate.essayContent}}</div>
               <el-button class="checkArticle" type="text" @click="showAllContent(moodEssayDate,index)" v-show="moodEssayDate.showAllContentBtn">展开查看全文</el-button>
               <el-button style="margin: 0;" type="text" @click="NotShowAllContent(moodEssayDate,index)" v-show="moodEssayDate.packUpArticle" icon="el-icon-top">收起</el-button>
             </div>
             <div class="articleBtnS">
               <div  v-show="!isLogin">——无心语录</div>
               <el-button :loading="DelBtnLoading"  v-show="isLogin" @click="DelMoodEssay(moodEssayDate)"  type="primary" icon="el-icon-delete ">删除</el-button>
             </div>
           </div>
         </div>
       </div>
      </el-card

  mounted() {
      this.$nextTick(()=>{
      console.log(this.refs.articleContent) //undefine
      //但是 refs里面是有的
        console.log(this.refs) // {} 这里面有 元素 
      })
    },

 setTimeout(() => {
  this.$nextTick(()=>{
     if(this.$refs.articleContent){
               console.log(this.refs.articleContent) //这时候会拿到一个元素数组
          }, 200);
      })
      //这时候 是可以拿取到的

methods：{
   // 界面请求数据  初始化
      getAllMessages(){
        getAllMessages().then(res=>{
          for(let i=0;i<res.data.moodEssayList.length;i++){
            this.$set(res.data.moodEssayList[i], 'index', i)
            this.$set(res.data.moodEssayList[i], 'packUpArticle', false)
            this.$set(res.data.moodEssayList[i], 'showAllContentBtn', false)
            this.$set(res.data.moodEssayList[i], 'isAll', true)
          }
          this.currentTotal = res.data.moodEssayList.length
          this.moodEssayDates = res.data.moodEssayList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        })
      },
}
// 最终 在 请求的回调函数，设置个计时器 完美解决 问题
      getAllMessages(){
        getAllMessages().then(res=>{
          for(let i=0;i<res.data.moodEssayList.length;i++){
            this.$set(res.data.moodEssayList[i], 'index', i)
            this.$set(res.data.moodEssayList[i], 'packUpArticle', false)
            this.$set(res.data.moodEssayList[i], 'showAllContentBtn', false)
            this.$set(res.data.moodEssayList[i], 'isAll', true)
          }
          this.currentTotal = res.data.moodEssayList.length
          this.moodEssayDates = res.data.moodEssayList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
          setTimeout(() => {
            if(this.$refs.articleContent){
              for(let i = 0;i<this.$refs.articleContent.length;i++){
                if(this.$refs.articleContent[i].offsetHeight>=189){
                  this.$set(this.moodEssayDates[i], 'showAllContentBtn', true)
                }
              }
            }
          }, 200);
        })
      },

<!--父组件-->
<template>
    <div>
      <!-- 
        ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素
        ref写在组件上时：这时候获取到的是子组件（比如navChild）的引用  
      -->
      <Child ref="navChild"/>
    </div>
</template>
<script>
import Child from "@/components/child";
export default {
  name: "App",
  methods: {
    navFn(){
      // this.$refs.navChild 或者 this.$refs['navChild']
      // 第一种使用情况(父组件调用子组件的方法)
      this.$ref.navChild.initData();
      // 第二种使用情况(父组件调用子组件的方法，并通过方法传值)
      this.$refs.navChild.initData('我是父组件的传值')
      // 第四种使用情况(父组件获取子组件的数据)
      this.$ref.navChild.status
      // 第四种使用情况(父组件获取子组件的数据，并改变数据)
      this.$ref.navChild.status = 1;
    }
  },
};
</script>

<!-- 子组件 -->
<template>
    <div>
      <div>{{message}}</div>
    </div>
</template>
<script>
export default {
  name: "Child",
  data() {
    return {
      message:'这是子组件',
      status:0
    };
  },
  components: {},
  created() {
      console.log(this.$data.status); //1（通过this.$data获取所有变量）
      this.status = this.$data.status;
  },
  methods:{
    initData(val){
      // 方法二：获取父组件的传值
      console.log(val); //我是父组件的传值
      this.message = val;
      let name = 'Hello World';
    }
  }
};
</script>
<style scoped>
</style>