Блог

Главная - Вопросы по программированию - Как мне инициализировать сгенерированную разметку?

Как мне инициализировать сгенерированную разметку?

#vue.js

#vue.js

Вопрос:

Я хочу добавить еще несколько элементов, которые реагируют на обработчик щелчков во время выполнения (т. Е. после того, как экземпляр Vue уже инициализирован). Добавление в DOM через v-html в конечном итоге работает, но новые v-on атрибуты остаются необработанными, поэтому эти кнопки не функционируют.

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title />
        <script src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script><![CDATA[
$(async () => {
    new Vue({
        data: { x: null },
        el: '#v',
        methods: {
            even_number: function() {
                console.log('yep, it worked');
            },
            start: function() {
                let x = '';
                let i = 0;
                while (i < 20) {
                    let num = Math.floor(Math.random() * 100);
                    if (num % 2) {
                        x  = num   ' ';
                    } else {
                        x  = `<button type="button" v-on="{click: even_number}">${ num }</button>`   ' ';
                    }
                    i  ;
                }
                this.x = x;
            }
        }
    });
});
        ]]></script>
    </head>
    <body>
        <dialog open="open" id="v">
            <button type="button" v-on="{click: start}">get this started</button>
            <pre><code v-html="x" /></pre>
        </dialog>
    </body>
</html>

Комментарии:

1. Самым простым способом было бы использовать ваш цикл while для заполнения массива данных, которые вы хотите отобразить, и сделать все остальное в шаблоне. Вот идея: jsfiddle.net/3q0k8may/1 но, возможно, ваша проблема сложнее, чем ваш пример.

Ответ №1:

Использование v-html ограничивает вас необработанным HTML. Директивы Vue не будут обработаны так, как вы надеетесь. Из документов:

Обратите внимание, что вы не можете использовать v-html для создания частичных элементов шаблона, поскольку Vue не является механизмом создания шаблонов на основе строк. Вместо этого компоненты предпочтительнее в качестве основной единицы для повторного использования пользовательского интерфейса и композиции.

Возможно, вы могли бы поместить часть логики start в шаблон и создать кнопку, которая будет отображаться условно. Видишь https://jsfiddle.net/ebbishop/f59ky7gj / для примера.