javascript - vue开发项目，创建出来的html，页面或许不到元素，

Question

在loadImage中获取不到dataUrl，因为ajax请求和这个方法同时进行的造成页面获取不到元素，所以加了定时器，但是如果ajax的请求时间超过了定时器的时间还是获取不到元素，所以有没有更好的办法来解决
$(function(){

var Myapp=new Vue({
    el:'#myapp',
    data:{
        apiBaseUrl:"https://api.starmakerstudios.com/api/v17/",
        songList:[],
        contain:{},
        scrollTop:'',
        dataIamge:[]
    },
    ready: function () {
        this.loadImage();
        this.lazyImage();
    },
    methods:{
        getParam: function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        loadImage:function(){
                var ts=$(this);
                setTimeout(function(){
                    var dataUrl = $('[data-url]');
                    var scrollTop = $(window).scrollTop();
                    var clientBottom = $(window).height() + scrollTop;
                    dataUrl.each(function (v, i) {
                        if ($(this).offset().top < clientBottom + 50) {
                            var _Url = $(this).attr('data-url');
                            $(this).attr('src',_Url)
                        }

                    })
                },500)
        },
        lazyImage:function () {
            var headerHeight=$('.header').height();
            var ts=this;
            $(window).on('scroll',function(){
                ts.loadImage();
                ts.scrollTop=$(window).scrollTop();

                if(ts.scrollTop>headerHeight){
                    $('.header-i').show();

                    setTimeout(function(){
                        $('.header-i').css({
                            'transform':'translate3d(0,0,0)',
                            '-webkit-transform':'-webkit-translate3d(0,0,0)',
                            '-moz-transform':'-moz-translate3d(0,0,0)',
                            '-o-transform':'-o-translate3d(0,0,0)'
                        })
                    },10)
                }else{
                    $('.header-i').hide();
                    setTimeout(function(){
                        $('.header-i').css({
                            'transform':'translate3d(0,-65px,0)',
                            '-webkit-transform':'-webkit-translate3d(0,-65px,0)',
                            '-moz-transform':'-moz-translate3d(0,-65px,0)',
                            '-o-transform':'-o-translate3d(0,-65px,0)',
                        })
                    },30)

                }
            })
            // $(window).scroll(function(){
            //
            // })

        },
        shareFacebook:function(){
            var ts = this;

            var text="Amazing charity activity on #StarMaker, Sing to donate money to a children's charity. Join me to share the love! #Sing #Karaoke #Music #Singer";

            var baseUrl=location.origin;

            var url=baseUrl+"/stmaker_songlist/promotion/"+this.promotion_id+"/"+ts.getParam('device').replace(/[,|_]/g, '_')+"/share_type=fb";

            var img = 'https://d2odow79s717pv.cloudfront.net/production/promotion/cover/13_share.jpg';
            location.href = 'sm://facebook/?text=' + encodeURIComponent(text) + "&url=" + encodeURIComponent(url)+'&img=' + encodeURIComponent(img);
        },
        goSing:function(params){
            var locationUrl=window.location.href;
            var url='';
            if(locationUrl.indexOf('fb')>0){//如果是facebook打开则是facebook
                $('.singlist').attr('data-gaid','facebookSongList');
                url="https://m-link.starmakerstudios.com/songdetail/?songId="+params.id;
            }else{
                if(event.target.className=="singer"){
                    $('.singer').attr('data-gaid','activitySing');
                    var  songs=JSON.stringify(params);
                    url="sm://recordsong/?song="+encodeURIComponent(songs)+"&promotion_id="+this.promotion_id;
                }else{
                    $('.singlist').attr('data-gaid','activitySongList');
                    url="sm://songdetail/?songId="+params.id+"&songTitle="+params.title+"&promotion_id="+this.promotion_id;
                }
            }
            window.location.href=url;
        }

    },
    created:function(){
        var ts=this;
        var dev = this.getParam('device').replace(/[,|_]/g, '/') || '';
        this.promotion_id=this.getParam('promotion_id');
        var url = this.apiBaseUrl + dev + '/promotions/' + this.promotion_id + '/songs';
        this.$http.get(url).then(function (response) {
            var data=JSON.parse(response.data);
            this.songList=data[1].song_list;
            this.contain=data[0];
        })
    }

})

});

Answer 1

vue获取就用vue的方法，就不要vue和jquery混着用了吧

Answer 2

楼上说的有道理，你也可以试试回调。

Answer 3

this.$nextTick(() => {

this.loadImage();
this.lazyImage();

})

ready里这样写吧

Answer 4

试一下生命周期钩子函数吧。
https://vuejs.org.cn/api/#选项-生命周期钩子
或者玩一下promise。

Answer 5

把jquery删掉