web-dev-qa-db-ja.com

SyntaxError：予期しないトークン} Vue js

私のコードは次のとおりです：

<multiple-photo-product :product="{{ isset($product) ? $product : '' }}"></multiple-photo-product>

コードを実行すると、エラーがスローされます。

SyntaxError：予期しないトークン}

しかし、コードが次のような場合：

 <multiple-photo-product product="{{ isset($product) ? $product : '' }}"></multiple-photo-product>

エラーは発生しません。

:を追加して、データがオブジェクトとして送信されるようにします。

:を使用しない場合、データは文字列として送信されます。

どうすれば解決できますか？

vue.jslaravel-5vuejs2vue-componentlaravel-blade
7
Success Man

問題は、php変数$productが設定されていない場合（つまり、nullまたは""と等しい場合）、Vueがプロップをバインドしようとすることです:product with ''を使用すると、最終的にエラーが発生します（:product=""バインドを作成するなど）

以下を試してください：

<multiple-photo-product :product="{{ isset($product) ? $product : '""' }}"></multiple-photo-product>

二重引用符""が単一引用符で囲まれていることに注意してください。 phpの$product変数が設定されていない場合、これは、Vueにproductプロップを空の文字列にバインドするように指示します。

こちら もご覧ください。あなたはそれが役に立つかもしれません。覚えておくべき重要な点は、v-bindが有効なJavaScript式を期待していること、つまり、補間された値（つまり、ブレードの波括弧の中に入っているもの{{}}）も有効なJavaScript式である必要があります

7
ira