Define vuejs component in blade

Question

@extends('layouts.app')
@section('body')
    <div class="general_wrapper" id="profile">
        @component('components.nav.main')
            @slot('menu')
                <div class="nav_menu">
                    <ul>
                        <li :class="{'active': tab==0}" @click="tabSelect(0)">
                           item0
                        </li>
                        <li :class="{'active': tab==1}" @click="tabSelect(1)">
                           item1
                        </li>
                    </ul>
                </div>
            @endslot
        @endcomponent
    </div>
@endsection
@section('script')
    <script>
        const profile = new Vue({
            el: '#app',
            data: {
                tab: 0
            },
            methods: {
                tabSelect(id) {
                    profile.tab = id;
                }
            }
        });
    </script>
@endsection

I need this bunch of code inside my project. I don't know what wrong with it. I got this error:

Property or method "tab" is not defined on the instance but referenced during render.

I removed 'const app = new Vue({ el: '#app'});' from app.js it works, but I have another Vue component in my project, and this made another one unknown...

stackoverflow.com/a/42910068/7077417

dan webb
– dan webb

2018-12-18 19:00:02 +00:00
Commented Dec 18, 2018 at 19:00 — dan webb
– dan webb, Commented Dec 18, 2018 at 19:00

Manuel Eduardo Romero · Accepted Answer · 2018-12-18 19:10:50Z

2

You need to define a container for you app

For eg.

<div id="app"> 
  Inside your vue component
</div>

so you can defina a vue component that use the container used in el setting

el: '#app',

maybe you will have some problem between blade and vue tags {{}}. Maybe you will can use @{{}} to specify vue vars

answered Dec 18, 2018 at 19:10

Manuel Eduardo Romero

8899 silver badges10 bronze badges

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

3 Comments

kazemm Over a year ago

My buddy, I defined it in app.js. I removed 'const app = new Vue({ el: '#app'});' from app.js it works, but I have another Vue component in my project, and this made another one unknown...

Manuel Eduardo Romero Over a year ago

You should declare the components to use en you main.js or app.js vue component... for eg. Vue.component('question', require('./components/questions/Question.vue'));

kazemm Over a year ago

tnx buddy, I have problem in defining components, but now there is another issue: stackoverflow.com/questions/53887003/…

Collectives™ on Stack Overflow

Define vuejs component in blade

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related