Переустановите компонент vue в динамически создаваемый список - PullRequest
Новая
       14

Переустановите компонент vue в динамически создаваемый список

0 голосов
/ 11 ноября 2018

Привет, ребята. Мне крайне нужна твоя помощь. Мой проект на 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>

...