Vue js component not working in laravel blade file

Question

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

Are there any errors in the concole?

sroes
– sroes

2017-02-20 07:25:27 +00:00
Commented Feb 20, 2017 at 7:25 — sroes
– sroes, Commented Feb 20, 2017 at 7:25

Yashvantsinh Zala · Accepted Answer · 2017-02-28 16:20:38Z

3

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

answered Feb 28, 2017 at 16:20

Yashvantsinh Zala

5311 gold badge3 silver badges11 bronze badges

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

Comments

Severin Alice · Accepted Answer · 2017-02-20 07:06:07Z

1

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.

answered Feb 20, 2017 at 7:06

Severin Alice

618 bronze badges

2 Comments

Tester Over a year ago

NO. i get error like this "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." But i have already used <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

Vishal Bhandare Over a year ago

Question is not answered correctly, Adding @{{ todo.text }} solve php issue but Javascript error is thrown Uncaught ReferenceError: groceryList is not defined.

Collectives™ on Stack Overflow

Vue js component not working in laravel blade file

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related