JoeDawson
872
8
Vue

Pass model to component using properties?

Posted 3 years ago by JoeDawson

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?

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.