快捷導(dǎo)航

vue如何解決this.refs拿取v-for下元素undefine問題

更新時間：2023年05月20日 08:39:42 作者：凡塵向天

這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue解決this.refs拿取v-for下元素undefine問題

問題

我想從 v-for 底下拿取一個 ref=“articleContent”的div

<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（）里面拿取

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

嘗試在update（）里面拿，也是undefined

最后設(shè)置了個定時器，解決

?setTimeout(() => {
? this.$nextTick(()=>{
? ? ?if(this.$refs.articleContent){
? ? ? ? ? ? ? ?console.log(this.refs.articleContent) //這時候會拿到一個元素數(shù)組
? ? ? ? ? }, 200);
? ? ? })
? ? ? //這時候 是可以拿取到的

反思：

之所以拿取不到，是因為容器還未渲染我就去獲取元素，因為我這里是異步請求數(shù)據(jù)來渲染容器的

methods：{
? ?// 界面請求數(shù)據(jù) ?初始化
? ? ? 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)
? ? ? ? })
? ? ? },
}
// 最終 在 請求的回調(diào)函數(shù)，設(shè)置個計時器 完美解決 問題
? ? ? 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);
? ? ? ? })
? ? ? },

心得

問題就是分為三個部分，第一是創(chuàng)建容器，第二是生命周期獲取容器元素，第三是異步請求數(shù)據(jù)后渲染容器。

按照之前的解決辦法，出問題是因為，是這個順序，所以就是我在容器還未被數(shù)據(jù)渲染就去拿取元素，自然是undefine。

因此想要解決只需要將第二步和第三步換個順序就行，所以我想到了設(shè)置定時器。

vue中this.$refs的使用

<!--父組件-->
<template>
    <div>
      <!-- 
        ref 寫在標簽上時：this.$refs.名字  獲取的是標簽對應(yīng)的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']
      // 第一種使用情況(父組件調(diào)用子組件的方法)
      this.$ref.navChild.initData();
      // 第二種使用情況(父組件調(diào)用子組件的方法，并通過方法傳值)
      this.$refs.navChild.initData('我是父組件的傳值')
      // 第四種使用情況(父組件獲取子組件的數(shù)據(jù))
      this.$ref.navChild.status
      // 第四種使用情況(父組件獲取子組件的數(shù)據(jù)，并改變數(shù)據(jù))
      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>