mounted钩子问题
recommend.vue
<script type="text/ecmascript-6">
import Slider from 'base/slider/slider'
import {getRecommend, getDiscList} from 'api/recommend'
import {ERR_OK} from 'api/config' export default {
name: 'Recommend',
data() {
return {
recommends:[]
}
},
components: {
Slider
},
created() {
this._getRecommend()
},
methods: {
_getRecommend(){
getRecommend().then((res)=> {
if(res.code === ERR_OK){
console.log(res.data.slider); this.recommends = res.data.slider
}
})
}
} }
</script>
在recommend.vue中created执行this._getRecommend(),这是个异步操作,可能需要几秒, 但是slide.vue中的mounted钩子已经渲染执行,
但slide.vue中插槽无内容,出错
<template>
<div class="slider" ref="slider">
<div class="slider-group" ref="sliderGroup">
<slot>
</slot>
</div>
<div class="dots">
<span class="dot"></span>
</div>
</div>
</template> <script type="text/ecmascript-6">
import {addClass} from 'common/js/dom'
import Bsrcoll from 'better-scroll' export default {
name: 'Slider',
props: {
loop: {
type: Boolean,
default: true
},
autoplay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 4000
}
},
mounted() {
setTimeout( () => {
this._setSliderWidth()
this._initSlider()
},20)//浏览器涮新时间
},
methods: {
_setSliderWidth(){
//获取sliderGroup子元素dom集合
this.children = this.$refs.sliderGroup.children let width = 0
let slideWidth = this.$refs.slider.clientWidth//slider窗口宽度 for (let i =0; i < this.children.length; i++) {
let child = this.children[i] addClass(child, 'slider-item') child.style.width = slideWidth + 'px' width += slideWidth }
if(this.loop){
width += 2*slideWidth
}
this.$refs.sliderGroup.style.width = width + 'px' },
_initSlider(){ }
} }
</script>
所以在父级添加v-if="recommends.length",来判断recommends是否得到
<div class="slider-wrapper" v-if="recommends.length">
<slider>
<div v-for="item in recommends" :key="item.id ">
<a :href="item.linkUrl">
<img :src="item.picUrl" alt="" />
</a>
</div>
</slider>
</div>
mounted钩子问题的更多相关文章
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法
最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...
- vue 使用同一组件,切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...
- vue中子组件的created、mounted钩子中获取不到props中的值问题
父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中: <template> <div> <head- ...
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- vue 生命周期钩子的理解 watch computed
一 理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...
随机推荐
- Eclipse安装Properties插件来编辑中文
一.在线安装 输入这个地址:http://propedit.osdn.jp/eclipse/updates/ 二.离线安装 在官网上下载最新版本:https://zh.osdn.net/project ...
- docker run和nsenter
docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...
- Spring注解配置定时任务<task:annotation-driven/>
http://m.blog.csdn.net/article/details?id=50945311 首先在配置文件头部的必须要有: xmlns:task="http://www.sprin ...
- ubuntu各文件夹简介 [转载]
原文地址:ubuntu各文件夹简介作者:SuperZhy ubuntu各文件夹简介 /bin 二进制可执行命令/dev 设备文件(硬盘/光驱等)/etc 系统管理和配置文件/etc/rc.d 启动的配 ...
- Cocos2d坐标系具体解释
1.笛卡尔坐标系 左手坐标系(Direct3D坐标系),右手坐标系(Direct3D坐标系) 大拇指和食指分别相应x轴和y轴 2.UI坐标系 iOS/Android/Windows SDK中的通用UI ...
- 汉澳Sinox2014X64server高级桌面服务器版操作系统公布
汉澳Sinox2014X64server高级桌面服务器版操作系统公布 当你在现代城市夜空中看到一道闪电.屏幕中央闪过几个图形,转眼间变成美轮美奂的紫色空中天国,说明你来到了汉澳sinox2014世 ...
- Database returned no natively generated
database returned no natively generated 分类:Hibernatehbm.xml中的配置如下: <id name="logId" typ ...
- BestCoder Round #60/HDU 5505 暴力数学
GT and numbers 问题描述 给出两个数NN和MM. NN每次可以乘上一个自己的因数变成新的NN. 求最初的NN到MM至少需要几步. 如果永远也到不了输出-1−1. 输入描述 第一行读入一个 ...
- 读取Excel文件到DataTable中
private static string[] GetExcelSheetNames(OleDbConnection conn) { DataTable dtbSh ...
- win7下远程登录ubuntu mysql
网络上找了很久的一个办法,不然老是远程访问不了linux mysql. 原先一直用root登录,进不了,新建一个root1倒是可以了. 安装好mysql后,按以下步骤: 1.将vim /etc/mys ...