CODEWITHSUNDEEP
laravelvuejs2laravel-blade
Kal
Kal

Reputation: 988

Passing values to Vue component with Blade

I have Vue2, running with Laravel 5.5. Trying to pass values to a component by I keep getting errors from VUE

<nav-bar data-route-name="{{$routeName}}" :route-name="{{$routeName}}"></nav-bar>

when I inspect I do see data-route-name="home", however, I keep getting this error:

[Vue warn]: Property or method "home" 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

props: ['routeName'],
mounted() {
  console.log(this.routeName);
}

The console outputs undefined when the component loads up

Now my question is why does the console outputs undefined, why do I get the Vue warn, and how do I fix that?

Upvotes: 0

Views: 2696

Answers (3)

Ben
Ben

Reputation: 5129

You are using two templating engines in this case, Laravel Blade and Vue. You should read this section Blade & Javascript Frameworks. When you are writing this, you are binding the data from Laravel to template.

<nav-bar data-route-name="{{$routeName}}" :route-name="{{$routeName}}"></nav-bar>

// After Laravel Blade Rendering you get:

<nav-bar data-route-name="home" :route-name="home"></nav-bar>

// This makes Vue warn because you did not declare data home

I guess you are trying to bind the data from Vue to template? You can add @ to ignore the Laravel Blade rendering. I have also fixed some syntax, you should read the manual in Vue: Template Syntax.

<nav-bar data-route-name="@{{routeName}}" :route-name="routeName"></nav-bar>

// After Laravel Blade Rendering you get:

<nav-bar data-route-name="{{routeName}}" :route-name="routeName"></nav-bar>

Upvotes: 0

Bessamuto
Bessamuto

Reputation: 31

Just try passing like this:

<nav-bar :route-name="'{{$routeName}}'"></nav-bar>

You need send string with '' (quotes)

Upvotes: 2

ashutosh
ashutosh

Reputation: 68

In props you should use attribute name not directly attribute value.

props: ['route-name'],

Upvotes: 0

Related Questions