vue如何解决this.refs拿取v-for下元素undefine问题
作者：凡尘向天
这篇文章主要介绍了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
最后设置了个定时器，解决
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);
})
},心得
问题就是分为 三个部分， 第一是 创建容器，第二是生命周期 获取容器元素 ，第三 是 异步请求数据后渲染容器。
按照之前的解决办法，出问题是因为，是这个顺序，所以 就是 我在容器还未被数据渲染就去拿取元素，自然是undefine。
因此 想要解决 只需要将 第二步 和第三步 换个顺序就行，所以我想到了设置定时器。
vue中this.$refs的使用
<!--父组件-->
<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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。