CODEWITHSUNDEEP
laravelvue.js
Yosi Pramajaya
Yosi Pramajaya

Reputation: 4085

Blade pass Collection as String instead of Array

Passing Collection to Vue through Blade, will be received as String instead of Array. In the past, usually it will be received as Array. Now it's received as JSON-encoded String. Anyone know why? Apparently, some old Vue files will still receive as Array.

Sample code:

view.blade.php

@section('content')
  <div id="todos_view">
    <vue-component-here
      :todos="{{ $todosCollection }}"
    />
  </div>

  <script src="{{ mix('/js/test.js') }}"></script>
@endsection

TodoView.vue

<template>
</template>

<script>
    export default {
        props: {
            todos: {
                type: Array, //This one should work. But instead, it will receive JSON-encoded String
                required: false
            }, ...
        }
    }
</script>

Upvotes: 0

Views: 229

Answers (1)

matticustard
matticustard

Reputation: 5149

view.blade.php

@section('content')
  <div id="todos_view">
    <vue-component-here
      :todos='@json($todosCollection)'
    />
  </div>

  <script src="{{ mix('/js/test.js') }}"></script>
@endsection

Tada!

P.S. - Make sure to use single quotes with @json!

Upvotes: 2

Related Questions