时间戳

首页 > 解决方案 > 页面加载后的 Web 组件被破坏

request - 页面加载后的 Web 组件被破坏

问题描述

我创建了一个自定义元素（Web 组件）并使用 webpack 将毫无问题地呈现，但正如我在工作页面（这是一个 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);

我应该如何调试这个问题？

标签： requestrenderweb-componentdestroy

解决方案

在此处输入图像描述 如果你customElements.define('tours-events', class{});在控制台中运行

并且您undefined知道（WordPress？）将您重定向到另一个页面。

如果您遇到 DOM 异常，则 Element IS 已定义

如果您的元素不在 DOM 中（如果这就是您所说的“已销毁”）
，则您必须逐步通过控制台调试器来查找删除它的原因/原因。

在您的元素的构造函数中放置一个debugger;语句并从那里获取它。

推荐阅读