Laravel fetchi API Data vue-CodePudding

Getting to know Laravel a bit more and I was wondering what's the best way to pass my data from my controller into my Vue component?

I have understood how to actually pass it as a prop, however, I can't seem to get it to render the way I want. my props in my Vue component are. My controller here:

{
    public function fetch() {

        $data = Http::get('https://jsonplaceholder.typicode.com/albums')->json();
        return view('welcome', ['data' => $data]);
    }
}

My view then passes on the data to my vue component like this. 
<example-component :albums="@json($data)" />

My Vue props structure is below.

props: {
    albums: {
      type: Array,
      default: []
    },
  }

Heres how im trying to render the data in my vue component:

    <div>
        <h1 v-for="album in albums" :key="album.id">
            {{ album.title }}
        </h1>
    </div>
</template>

Results here enter link description here

I have verified the output from my controller is an array containing arrays. Am I handling the data wrong from the perspective of my Vue component?

CodePudding user response：

you dont need to convert it to json :albums="@json($data)" it's already json ->json();

try replace

:albums="@json($data)"

with this

:albums="{{ $data }}"

CodePudding user response：

For anyone who wants to help:

is this even the correct way of setting up my prop for an array?

    albums: {
      type: Array,
      required: true
    },
        },```