Bas
Bas

Reputation: 2400

Laravel Vuejs pass data from blade to .vue template

I am new in Vuejs. I have the following code and i am getting an error. I am trying to pass a var into vue file.

What do i do wrong? And how can i achieve this?

App.js:

window.Vue = require('vue');
Vue.component('formlements' ,require('./components/formelements/Input.vue') );
const app = new Vue({
   el: '#app'
});

Blade:

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

Vue file

<template>
    <div class="container">
        {{testinfo.somekey}}
    </div>
</template>

Error:

Property or method "testinfo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

Upvotes: 0

Views: 1502

Answers (1)

Terry
Terry

Reputation: 66093

As per my comment, you have not defined props on your component or app. Even though you have bound the variable to the prop using :bind, it is still not accessible to the component.

All you need to do is declare the prop, e.g. props: { testinfo: Object }.

Upvotes: 1

Related Questions