Question

我想添加更多在运行时（即在Vue实例已经初始化之后）对点击处理程序做出反应的元素。最终可以通过v-html添加到DOM，但是新的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>

Answer 1

使用v-html会将您限制为原始html。 Vue指令将不会按照您的期望进行处理。从docs：

请注意，由于Vue不是基于字符串的模板引擎，因此无法使用v-html来组成模板部分。相反，组件是首选的UI重用和组合的基本单元。

也许您可以将start的某些逻辑放入模板中，并构建一个将有条件呈现的按钮。有关示例，请参见https://jsfiddle.net/ebbishop/f59ky7gj/。

如何初始化生成的标记？

1 个答案: