- 12
- 0
<template>
<div class="goodList" ref="goodList">
<dl class="foodList" v-for="(item, index) in goods" :key="index" ref="foodList">
<dt class="name">{{item.name}}</dt>
<dd class="food" v-for="(food, i) in item.foods" :key="i">
<img :src="food.image" :alt="food.name" width="57" height="57">
</dd>
</dl>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
// 后台数据
get_goods () {
axios.get('/goods')
.then(res => {
let { status, data: { errno, data: data2 } } = res
if (status === 200) {
if (errno === 0) {
this.goods = data2
console.log(this.$refs.foodList) ===>undefined
console.log(this.$refs.goodList) ===><div class="goodList">...</div>
})
this.$nextTick(() => {
console.log(this.$refs.foodList) ===><div class="foodList">...</div>
})
console.log(this.$refs.goodList) ===><div class="goodList">...</div>
})
})
}
}
})
.catch(res => {
console.log(res)
})
}
},
created () {
this.get_goods()
console.log(this.$refs.foodList) ===>undefined
console.log(this.$refs.goodList) ===>undefined
this.$nextTick(() => {
console.log(this.$refs.foodList) ===>undefined
console.log(this.$refs.goodList) ===><div class="goodList">...</div>
})
},
mounted() {
console.log(this.$refs.foodList) ===>undefined
console.log(this.$refs.goodList) ===><div class="goodList">...</div>
this.$nextTick(() => {
console.log(this.$refs.foodList) ===>undefined
console.log(this.$refs.goodList) ===><div class="goodList">...</div>
})
}
}
在网上看到: ref 最好在页面渲染(mounted)以后使用,在页面渲染前(mounted前)使用可以在this.$nextTick()函数中
有三个疑问:
1.在created生命周期函数中,this.$nextTick()为什么不能获取v-for的foodList?
2.在mounted生命周期函数中,页面渲染后,使用和未使用this.$nextTick(),有什么区别? 及this.$nextTick()为什么不能获取v-for的foodList?
3.在created生命周期函数中,向后台获取数据,使用this.$nextTick(),为什么能获取v-for的foodList
请各路大神指点指点,非常感谢### 问题描述
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
你期待的结果是什么?实际看到的错误信息又是什么?
0
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 11 元积分
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
