将VueJS安装到顶级div&用户提交的内容

时间:2017-08-18 10:03:03

标签: vue.js vuejs2

我正在建立一个小型指南网站,允许用户提交有关游戏的文章。网站上有许多使用VueJS编写的组件。该网站的大部分由Laravel提供支持,并以纯HTML形式呈现,但这些组件除外。目前,我将VueJS安装到#app或我的顶级div元素,这是Laravel配置的默认设置。

然后我像往常一样将组件放入页面(< my-component>),VueJS会选择它们并适当地渲染它们。真棒。

但是,在某些情况下,用户提交的内容实际上会破坏页面。例如,如果使用双括号{{example}},这是VueJS语法,它将拾取标记并拒绝呈现页面。另一个例子是如果我需要使用< script>身体中不是VueJS的标签,例如嵌入Twitch TV流。

似乎因为Vue已挂载到#app,所以内部共享VueJS语法或脚本标记的所有内容都会破坏页面。

正在向#app加载错误的想法吗?我是否应该拆分所有组件并以更细的方式启动它们?我非常喜欢将Vue组件放入代码中的方法,使用< this-syntax>。

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以通过Laravel的刀片引擎在其前面使用@来禁用Vue.js中花括号的解释。它们将保持不受PHP的影响,并且会让它们被Vue.js

接收

Hello, @{{ name }}.

查看有关javascript框架的部分:

https://laravel.com/docs/5.4/blade#displaying-data