Laravel Vuejs pass data from blade to .vue template

Question

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

That's because you haven't defined it as a prop in your app/component, something like props: { testinfo: <type> }. Can you show us the full component file for formelements? — Terry
– Terry, Commented May 3, 2018 at 9:03
@Terry this was the correct answer export default { props: { testinfo: Object } } Can you give it as an answer — Bas
– Bas, Commented May 3, 2018 at 9:24

Terry · Accepted Answer · 2018-05-03 10:09:05Z

1

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 }.

answered May 3, 2018 at 10:09

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Vuejs pass data from blade to .vue template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related