嗨,伙计们。 我非常需要您的帮助。我在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>