"Unexpected identifier" error in Javascript when trying to parse JSON with escaped single quote

Question

In my Laravel application, I am passing a JSON object to a Vue component:

<search v-bind:library="'{{ json_encode(language_library()) }}'"></search>

language_library() , for testing purposes, returns just one line:

{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}

As you see, the single quote in the string is escaped. However, Vue throws this error:

[Vue warn]: Error compiling template:

invalid expression: Unexpected identifier in

    '{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}'

  Raw expression: v-bind:library="'{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}'"

I don't understand why the issue is happening. It's a single quote inside double quotes and it's escaped too (using addslashes() in the PHP back-end). How can I have a string that contains quotes in my JSON, if not like this?

If, instead of addslahes, I manually do something like this...

str_replace("'", "\'", $string)

...I still get the same error, with two backslashes in front of the quote in JSON.

Answer 1

You simply have to write the search tag like in the below example:

<search v-bind:library="'{{ json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS) }}'"></search>

• JSON_HEX_APOS: All ' are converted to \' .
• JSON_HEX_QUOT: All " are converted to ".

EDIT

Based on an example of Laravel's Documentation , you should remove the single quotes.

<option {{ $isSelected($value) ? 'selected="selected"' : '' }} value="{{ $value }}">
    {{ $label }}
</option>

So your search tag will become like this:

<search v-bind:library="{{ json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS) }}"></search>
// or you could declare a variable and assign `json_encode` to it
<?php $json = json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS); ?>
<search v-bind:library="{{ $json }}"></search>

Answer 2

this is common mistake. its not about quotation, the double quotation make this error. why? see your input for prop

v-bind:library="'{"you_dont_have_subscription":"You don\\'t have an active subscription right now."}'"

it means js doesnt know why library prop ends with v-bind:library="'{" so use quotation instead of dbl quotation. like this:

<search :library='@json(language_library())'></search>

Answer 3

try it may work same thing happend with me some time

i use {!! $value !! }} {!! $value !! }}

<search v-bind:library="{!! json_encode(language_library()) !!}"></search>

Answer 4

Answer: you NO NEED extra '

explanation: remember json_encode will return {} and laravel will echo it as in {{ }} then passed and compiled to javascript as an object itself {}

edit:

with your extra ' will treated as closing string by the javascript

example to your coding

<search v-bind:library="{{ json_encode(language_library()) }}"></search>