Определить компонент vuejs в блейде

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

---

Мне нужен этот пакет кода внутри моего проекта.Я не знаю, что с этим не так.Я получил эту ошибку:

Свойство или метод "tab" не определены в экземпляре, но на него ссылаются во время рендеринга.

Я удалил "const app = new Vue ({el: '#app'}); 'из app.js это работает, но у меня есть другой компонент Vue в моем проекте, и это сделало еще один неизвестным ...

Answer 1

Вам необходимо определить контейнер для вашего приложения.

Например.

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

, чтобы вы могли определить компонент vue, который использует контейнер, используемый при настройке el

el: '#app',

, возможно, у вас возникнут проблемы между тегами blade и vue {{}}.Может быть, вы можете использовать @ {{}} для указания vue vars