2017-08-18 7 views
0

私はユーザーがゲームに関する記事を投稿できる小さなガイドウェブサイトを構築しています。 VueJSを使用して、Javascriptで書かれたWebサイトには多くのコンポーネントがあります。サイトの大半はLaravelによって提供され、これらのコンポーネント以外のプレーンHTMLでレンダリングされます。現時点では、#appにマウントされているVueJS、またはLaravel設定のデフォルトであるトップレベルのdiv要素があります。VueJSをトップレベルのdiv&userに投稿しました。

通常のようにコンポーネントをページにドロップし(< my-component>)、VueJSはこれを選択して適切にレンダリングします。驚くばかり。

ただし、ユーザーが送信したコンテンツが実際にページを破損する状況がいくつかあります。たとえば、二重括弧が{{例}}で使用されている場合、これはVueJS構文であり、タグを取得してページのレンダリングを拒否します。もう一つの例は、VueJSではない、例えばTwitchのTVストリームを埋め込む、body内の< script>タグを使用する必要がある場合です。

Vueは#appにマウントされているため、VueJS構文を共有するか、スクリプトタグであるかのように、ページが壊れてしまうようです。

#appに間違った考えがありますか?私はすべてのコンポーネントを分割して、何らかの方法でそれらをより細分化して起動する必要がありますか? Vueコンポーネントを< this-syntax>のコードにドロップするというアプローチが本当に好きです。

ありがとうございます!

答えて

0

LaravelのブレードエンジンでVue.jsの中括弧の解釈を無効にするには、その前に@を使用します。申し訳ありませんが、私は「ドン

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

+0

:彼らは、JavaScriptのフレームワーク上のセクションをご覧ください

Hello, @{{ name }}.

PHPによって、このよう手つかずのままとVue.js

によってピックアップを取得するためにそれらを残しますあなたが質問を理解したと思う - 括弧を拾うVueがここでの問題です。 –

+0

二重括弧はサーバーサイドの言語でレンダリングされ、JavaScriptが解析されたものだけを解釈するため、それが可能な方法はわかりません。 –

関連する問題