SoFunction
Updated on 2025-04-03

How to solve the problem of getting undefined elements under v-for

vue solves the problem of getting undefined elements under v-for

question

I want to get a div with ref="articleContent" from under v-for

<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=" ///file_images/article/201310/"></el-avatar>
           <swingingPendant class="swingingPendant" v-show="!isLogin"></swingingPendant>
         </div>
         <div class="cardCenter">
           <div class="cardCenterHeader">
             <div class="articleTitle"><label>{{}}</label></div>
             <span><i class="el-icon-time"></i>{{}}</span>
           </div>
           <div class="cardCenterBody">
             <div class="cardCenterBodyTop">
               <div :class="[?'articleContent':'articleContent2']"  ref="articleContent">{{}}</div>
               <el-button class="checkArticle" type="text" @click="showAllContent(moodEssayDate,index)" v-show="">Expand to view the full text</el-button>
               <el-button style="margin: 0;" type="text" @click="NotShowAllContent(moodEssayDate,index)" v-show="" icon="el-icon-top">Close</el-button>
             </div>
             <div class="articleBtnS">
               <div  v-show="!isLogin">——Unintentional Quotes</div>
               <el-button :loading="DelBtnLoading"  v-show="isLogin" @click="DelMoodEssay(moodEssayDate)"  type="primary" icon="el-icon-delete ">delete</el-button>
             </div>
           </div>
         </div>
       </div>
      </el-card

I've tried to get it inside mounted()

  mounted() {
      this.$nextTick(()=>{
      () //undefine
      //But there is a refs inside        () // {} There are elements here      })
    },

Try to get it in update(), it is also undefined

Finally, a timer was set to solve

 setTimeout(() => {
  this.$nextTick(()=>{
     if(this.$){
               () //A element array will be obtained at this time          }, 200);
      })
      //At this time It's available

            

Reflection:

The reason why I can't get it is because the container has not been rendered yet, I will get the elements because I am requesting data asynchronously to render the container.

methods：{
   // Interface request data initialization      getAllMessages(){
        getAllMessages().then(res=>{
          for(let i=0;i<;i++){
            this.$set([i], 'index', i)
            this.$set([i], 'packUpArticle', false)
            this.$set([i], 'showAllContentBtn', false)
            this.$set([i], 'isAll', true)
          }
           = 
           = ((-1)*,*)
        })
      },
}
// Finally, in the requested callback function, set a timer to perfectly solve the problem      getAllMessages(){
        getAllMessages().then(res=>{
          for(let i=0;i<;i++){
            this.$set([i], 'index', i)
            this.$set([i], 'packUpArticle', false)
            this.$set([i], 'showAllContentBtn', false)
            this.$set([i], 'isAll', true)
          }
           = 
           = ((-1)*,*)
          setTimeout(() => {
            if(this.$){
              for(let i = 0;i<this.$;i++){
                if(this.$[i].offsetHeight>=189){
                  this.$set([i], 'showAllContentBtn', true)
                }
              }
            }
          }, 200);
        })
      },

Experience

The problem is that it is divided into three parts. The first is to create a container, the second is to obtain container elements in the life cycle, and the third is to render the container after asynchronously requesting data.

According to the previous solution, the problem is because it is in this order, so I took the elements in the container before it was rendered by data, which is naturally undefined.

Therefore, if you want to solve it, you only need to change the second and third steps in order, so I thought of setting the timer.

Use of this.$refs in vue

<!--Parent component-->
<template>
    <div>
      <!-- 
        ref When written on the label：this.$refs.name  What is obtained is the corresponding tagdomelement
        refWhen written on a component：What is obtained at this time is the child component（for examplenavChild）Quotation  
      -->
      <Child ref="navChild"/>
    </div>
</template>
<script>
import Child from "@/components/child";
export default {
  name: "App",
  methods: {
    navFn(){
      // this.$ or this.$refs['navChild']      // The first usage case (the method of parent component calling child component)      this.$();
      // The second usage case (the parent component calls the child component's method and passes the value through the method)      this.$('I am the pass value of the parent component')
      // The fourth usage case (the parent component obtains the data of the child component)      this.$
      // The fourth usage case (the parent component gets the data of the child component and changes the data)      this.$ = 1;
    }
  },
};
</script>
<!-- Subcomponents -->
<template>
    <div>
      <div>{{message}}</div>
    </div>
</template>
<script>
export default {
  name: "Child",
  data() {
    return {
      message:'This is a subcomponent',
      status:0
    };
  },
  components: {},
  created() {
      (this.$); //1 (get all variables via this.$data)       = this.$;
  },
  methods:{
    initData(val){
      // Method 2: Get the passed value of the parent component      (val); //I am the parent component's value       = val;
      let name = 'Hello World';
    }
  }
};
</script>
<style scoped>
</style>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.