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
[{"id":6,"name":"aaa","created_at":"2019-12-05
Raw expression: :companies="[{"id":6,"name":"aaa","created_at":"2019-12-05"
153| <!-- Page Content -->
154|
155| <company_index :companies="[{"id":6,"name":"aaa","created_at":"2019-12-05" 14:35:38","updated_at":"2019-12-05="" 14:35:38"}]=""></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:
@extends('layouts.backend')
@section('content')
<!-- Page Content -->
<company_index :companies={{json_encode($companies)}}></company_index>
<!-- END Page Content -->
@endsection
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_encodefrom 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.
