CODEWITHSUNDEEP
laravel-5vue.js
Tester
Tester

Reputation: 271

Vue js component not working in laravel blade file

I am new in vueJS and i try to implement my custom component in my laravel .blade.php file but it's not working My code like this 

Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                {text: 'Vegetables'},
                {text: 'Cheese'},
                {text: 'Whatever else humans are supposed to eat'}
            ]
        }
    }) 

<div id="app-7">
<ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>

i have add this same code in .html file then it's working

Upvotes: 1

Views: 4104

Answers (2)

Yashvantsinh Zala
Yashvantsinh Zala

Reputation: 531

add @ before @{{ todo.text }} because if you not give "@" then it's count as laravel variable

Upvotes: 3

Severin Alice
Severin Alice

Reputation: 61

I guess your getting an error like this

Use of undefined constant todo - assumed 'todo'

this means that blade template engine mixed up with vue js template 

{{ todo.text }}

blade considers this as its code but there is not any todo variable there

How to fix this :

Wrap your javascript code into a .js file and make sure your loading it just at the bottom of your blade file.

Upvotes: 1

Related Questions