[Vuejs]-Can't pass data from blade to vue (Laravel 5.3)

0đź‘Ť

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.

👤Winston Fale

0đź‘Ť

The answer from Tony Fale wasn’t exactly what I was looking for but it did give me a clue that helped me think of the answer.

In this code:

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

I thought “someinfo” would just be treated as a string but Vue treats it as a JavaScript variable. Since someinfo isn’t defined anywhere, it causes an error.

If instead I do:

<example :testinfo="{somekey: 'someinfo'}"></example>

and change Example.vue to:

<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.somekey}} I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

It works as expected.

Leave a comment