веб-компонент после загрузки страницы разрушается - PullRequest
Новая
       52

веб-компонент после загрузки страницы разрушается

0 голосов
/ 07 октября 2019

Я создал пользовательский элемент (веб-компонент), и с помощью веб-пакета будет отображаться без каких-либо проблем, но, как я включаю на рабочей странице (которая является WordPress) на рендере будет отображаться и в конце запроса, чтобы просверлить визуализированный элементразрушается. Я не получаю никакой ошибки в консоли.

компонент выглядит следующим образом 

import moment from "moment";
import 'moment/min/moment-with-locales'
moment.locale('de');

export class ToursEvents extends HTMLElement {
    constructor() {
        super();
        //this.attachShadow({mode: 'closed'});
    }

    connectedCallback() {
        this.html = this.innerHTML;
    }

    get data() {
        return this._data;
    }

    set data(tours) {
        let times = tours[0]
        this._data = tours[0];
        this.vendors = tours[1];
        let div = document.createElement("div");
        div.innerHTML = `
        ${times.reduce((acc, item) => `${acc}
                <div class="bk_day tours-list__slot">
                    <div class="bk_date tours-list__date">${moment(item.day).format("dddd")}, ${moment(item.day).format("DD.MM.YYYY")}</div>
                    <ul class="tours-list__vendors">${ this.makeList(item.times) }</ul>
                </div>`
            , ``)}`;

        this.innerHTML = div.innerHTML
        //this.shadowRoot.appendChild(div);
    }

    makeList(times) {
        let list = '';
        times.map( (time) => {
            const eventId = time.event_id;
            const vendor = this.vendors[eventId];
            let percentageFree = 0, mark = "", availability ="", workload = typeof(WORKLOAD) !== 'undefined' ? WORKLOAD : 0.8;



            let tips = '';
            list += '<li data-date="' + time.date + '" data-event-id="' + eventId + '" class="' + mark + '">';
            list += '<div class="tours-list__time">' + moment(time.date).format('HH.mm') + ' - ' + moment(time.date).format('HH.mm') +'</div>';

            if(vendor.title.includes("Discount")) {
                tips += '<div><span class="discount">Spar-tipp!</span></div>';
            }

            list += '<div class="tours-list__title">' + tips + vendor.title + '</div>';
            if(time.available_slots != 0) {
                list += '<div class=""><button class=""><span class="bk_info_text">Infos/Tickets</span> <span class="icon-down"></span></button></div>'
            } else {
                list += '<div class="bk_info"><span>Booked</span></div>'
            }

            list += '</li>';
        });

        return list
    }


    showDetails() {
    }


}

customElements.define('tours-events', ToursEvents);

Как мне отладить эту проблему?

1 Ответ

0 голосов
/ 07 октября 2019

enter image description here Если вы запускаете customElements.define('tours-events', class{}); в консоли

и получаете undefined вы знаете (WordPress?) Перенаправил вас на другую страницу.

Если вы получаете исключение DOM, элемент IS определен

Если вашего элемента нет в DOM (если это то, что вы имеете в виду под «уничтоженным»)
, вам придется пройти черезконсольный отладчик, чтобы найти причину, когда / почему он был удален.

Поместите оператор debugger; в конструктор вашего элемента и возьмите его оттуда.

...