Как реализовать привязку данных Vue внутри собственного настраиваемого HTMLElement? - PullRequest
Новая
       14

Как реализовать привязку данных Vue внутри собственного настраиваемого HTMLElement?

0 голосов
/ 05 мая 2020

Я хочу использовать собственный HTMLElement для создания компонентов и не хочу использовать для него компонент Vue.

У меня есть приложение. js файл: 

customElements.define("page-home", class extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = "<p>{{ hello }}</p>";
    }
});

const main = new Vue({
    el: "#app",
    data: {
        hello: "I'm a paragraph!"
    }
});

index. html: 

<!DOCTYPE html>
...
<body>
    <div id="app">
        <page-home></page-home>
    </div>
    <script type="text/javascript" src="/path/to/vue"></script>
    <script type="text/javascript" src="/path/to/appjs"></script>
</body>
...

и вывод: 

{{ hello }}

Как это исправить? Привязка данных vue не работает. Спасибо

...