Vue.js预标签之间的声明性渲染

Question

我刚刚开始使用Vue.js，尝试创建一个我希望用户能够自定义表单的函数。

所以我正在做的是我预览了表单，这里用户可以更改输入元素的标签。

在此表单下，我有<pre></pre>标记之间的表单代码，以便用户可以复制他自定义的表单并将其粘贴到其他位置。

现在问题。使用声明性渲染工作得很好，直到我想在代码所在的位置（即<pre>标记之间）使用它。当然，不是例如渲染标签的名称，而是呈现代码。

<label>{{ label 1 }}</label>

这很好。

<pre><label>{{ label 1 }}</label></pre>

这会改为代码。

JS-代码

const v = new Vue({
    el: '#app',
    data: {
        name: 'Namn',
        mail: 'Mejl',
        message: 'Meddelande'
    }
})

所以我的问题是，这可以以任何方式被规避吗？

Answer 1

所以答案是预标签与用户＆＃34; JJJ＆＃34;无关。指出。

  

预标签与它没有任何关系。问题很可能是您生成预览内容的方式。请制作一个最小的，完整的，可验证的例子 - 复制问题的东西。

问题在于我告诉Vue.js在div内部使用id #app进行渲染。但是，代码部分未涵盖此div。

移动div的结束标记以覆盖带有<pre></pre>标记的代码块后，一切正常。

我现在感到很愚蠢，谢谢你的帮助！