Level 23
Hi @JoeDawson, it's been awhile
Try to convert your product model to json.
Check this : https://laravel.com/docs/5.1/eloquent-serialization
Jan 16, 2016
8
Level 18
Pass model to component using properties?
Hello,
I'm trying to pass my Laravel model's data through to a Vue component using properties. Here's what I currently have.
<status-filter product="{{ $product }}"></status-filter>
My component currently looks like this.
<template>
<span class="label label-default">Something</span>
</template>
<script>
export default {
name: 'StatusFilter',
props: {
product: {
type: Object,
required: true
}
},
ready: function() {
console.log(this.product);
}
}
</script>
When I do this, I want to be able to access the values off of that product object but I'm not able to do that at the moment as nothing is being returned when I do something like this in my template.
The product name: {{ product.name }}
Any ideas how I can use that product model within my component?
Level 18
Hey @ARCANEDEV,
I've tried $product->toJson() Vue then gives me this error.
Invalid prop: type check failed for product="{"id":7,"asin":"B017K2L1P8","name":"Call of Duty: Black Ops III (PS4)","slug":"7-call-of-duty-black-ops-iii-ps4","price":4121,"description":"","url":"","published":1,"created_at":"2016-01-14 21:11:26","updated_at":"2016-01-14 21:11:46","categories":[]}". Expected Object, got String.
But that looks like an object to me? Maybe a bug on Vue's behalf?
Or am I doing something wrong? Thanks!
Level 23
Try to change the product type from Object to Array and see what happen.
Level 18
Similar error unfortunately @ARCANEDEV :(
Expected Array, got String.
Level 23
Try string and convert it to array.
Level 23
Level 18
That was it @ARCANEDEV!
My original code works, was just missing that damn colon!
<status-filter :product="{{ $product }}"></status-filter>
2 likes
Level 23
Hahaha ! @JoeDawson, you have two suspects now : colon and semicolon.
2 likes
Please or to participate in this conversation.