Laravel Blade Vue - Invalid Or Unexpected Token

- 1 answer

I am trying to pass a variable from Blade to a Vue component prop. However, when I'm passing the variable, something goes wrong. The error which I receive is the following:

[Vue warn]: Error compiling template:

invalid expression: Invalid or unexpected token in


  Raw expression: :companies="[{"id":6,"name":"aaa","created_at":"2019-12-05"

153|                      <!-- Page Content -->
155|      <company_index :companies="[{&quot;id&quot;:6,&quot;name&quot;:&quot;aaa&quot;,&quot;created_at&quot;:&quot;2019-12-05" 14:35:38&quot;,&quot;updated_at&quot;:&quot;2019-12-05="" 14:35:38&quot;}]=""></company_index>
   |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
156|      <!-- END Page Content -->
157|              </main>

(found in <Root>)

As you can see, a random quote is added which is NOT present in the datetime itself (after 2019-12-05). It only gets added when passing it to the Vue component. Here is my code from my blade file:


    <!-- Page Content -->

    <company_index :companies={{json_encode($companies)}}></company_index>
    <!-- END Page Content -->

I've tried the following things:

  • Checked to see if the datetime somehow had an extra quote, this was not the case.
  • Checked if other Eloquent Models had the same problems, which they do (They also use standard datetimes from Laravel).
  • Remove json_encode from my blade file
  • Replaced :companies={{json_encode($companies)} with :companies={!! $companies !!}
  • Searched for people with the same problem, but did not find anything about this problem.

I don't think there is anything wrong with my code, but I don't know for sure what my problem is. If you need more details, just ask.



try adding double quote :companies="{{json_encode($companies)}}"