在动态创建的列表中重新初始化Vue组件

时间:2018-11-11 14:41:31

标签: javascript laravel vue.js vue-component dynamic-list

嗨,伙计们。 我非常需要您的帮助。我在Laravel和Vue.js上的项目。因此,我通过vanilla js加载了医生列表,但是此项目包含vue组件,该组件不在动态创建的列表中初始化。

HTML

<div class="entity-thumb-img__bot-line">
    <a href="{{ route('doctor.item',['doctor'=>$doctor->alias,'city'=>$doctor->city->alias]).'#tab-2' }}"
       class="entity-thumb-img__reviews">{{$doctor->publicComments()->count()}} отзывов</a>
    <inp-rate obj="doctor" id="{{ $doctor->id }}" type="likes">
        <template slot="likes">{{ $doctor->likes }}</template>
        <template slot="dislikes">{{ $doctor->dislikes }}</template>
    </inp-rate>
</div>

JS

if(_$('.doctor-result__list')){
let list = _$('.doctor-result__list .content_scroll__block');
let page = 1;
let wait = false;
window.onscroll = function(ev) {
    let next_page_url = window.location.pathname + ('?page='+page);
    if(!wait){
        if ((window.innerHeight + window.scrollY) >= _$('.cities--list').offsetTop) {
            wait = true;
            axios.get(next_page_url).then((response)=>{
                let data = parseHTML(response.data);
                for(let item of data){
                    if(item.querySelector('a[rel*=modal-link]')){
                        addOpenModalToLink(item.querySelector('a[rel*=modal-link]'));
                    } 
                    list.appendChild(item);
                }
                wait = false;
                page++;
            })
        }
    }
};

}

和Vue

<template>
<div class="entity-thumb-img__thumb-control thumb-control">
    <span class="thumb-control__item" data-type="1">
        <span class="thumb-control__val">
            <slot name="likes" v-if="!updated"></slot><span v-if="updated">{{ val.likes }}</span>
        </span>
        <btn css="no-padding" :href="path" :data="{mark:1}" @failed="failed" @ready="sent"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></btn>
    </span>
    <span class="thumb-control__item down" data-type="2">
        <span class="thumb-control__val">
            <slot name="dislikes" v-if="!updated"></slot><span v-if="updated">{{ val.dislikes }}</span>
        </span>
        <btn css="no-padding" :href="path" :data="{mark:-1}" @failed="failed" @ready="sent"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></btn>
    </span>

</div>

0 个答案:

没有答案