Can't pass data from blade to vue (Laravel 5.3)

Question

I'm trying to get Vue components working in Laravel 5.3 and I want to pass data from my blade template to a Vue component.

But I'm getting an error and none of the answers I've found so far have worked.

I'm using the example component that comes with the fresh install. In my blade template I have:

<example :testinfo="someinfo"></example>

In my Example.vue I have:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        {{testinfo}} I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['testinfo'],
        mounted() {
            console.log('Component ready.')
        }
    }
</script>

The Vue component does load, but it does not display the testinfo, and it generates this error message:

Property or method "someinfo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

Winston Fale Winston Fale · Accepted Answer · 2017-03-07T02:54:30

referenced to your error -> Property or method "someinfo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

it means that someinfo model is not declared from your vue parent. it should be wrapped in data { someinfo:null } and from there supply him data and pass it in your component example.

regarding passing with data from vue blade. you should called ajax from your vue method like

Vue new(){
data : { someinfo : null },
ready :function() / mounted() vue2
{
this.getSomeInfo();
}
methods : {
    getSomeInfo : function(){
    var self = this;
    your ajax request here then 
    self .someinfo = (your ajax.response) 
    }
}
}

you need an sperate ajax call from controller to achieve to get your information from controller. after ajax call success then time to put the response to your vue model then it will automatically pass to your components re actively because of two way binding.

Can't pass data from blade to vue (Laravel 5.3)

2 Answers