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

1.问题

• 我想从 v-for 底下拿取一个 ref=“articleContent”的div

       

         

           
           
         
         

           

             
{{moodEssayDate.essayTitle}}
             {{moodEssayDate.ts}}
           
           

             

               
{{moodEssayDate.essayContent}}
               展开查看全文
               收起
             
             

               
——无心语录
               删除
             
           
         
       
      

• 我尝试在mounted（）里面拿取

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

• 尝试在update（） 里面拿，也是undefined
• 最后设置了个定时器，解决

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

• 反思：
  之所以 拿取不到，是因为 容器还未渲染 我就 去获取元素，因为我这里是异步请求数据来 渲染容器的

methods：{
   
   // 界面请求数据  初始化
      getAllMessages(){
        getAllMessages().then(res=>{
          for(let i=0;i{
          for(let i=0;i {
            if(this.$refs.articleContent){
              for(let i = 0;i=189){
                  this.$set(this.moodEssayDates[i], 'showAllContentBtn', true)
                }
              }
            }
          }, 200);
        })
      },

2.总结

• 问题就是分为 三个部分， 第一是 创建容器，第二是生命周期 获取容器元素 ，第三 是 异步请求数据后渲染容器。按照之前的解决办法，出问题是因为，是这个顺序，所以 就是 我在容器还未被数据渲染就去拿取元素，自然是undefine。因此 想要解决 只需要将 第二步 和第三步 换个顺序就行，所以我想到了设置定时器。不知道对不对，但是确实解决了我的问题，希望我的方法能解决你们的问题