在刀片中定义 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

---

我的项目中需要这些代码。我不知道它有什么问题。 我收到了这个错误：

属性或方法“选项卡”未在实例上定义，但 在渲染期间引用。

我删除了 'const app = new Vue({ el: '#app'});'从 app.js 可以正常工作，但是我的项目中有另一个 Vue 组件，这使得另一个未知...

Answer 1

你需要为你的应用定义一个容器

例如。

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

这样你就可以定义一个使用 el 设置中使用的容器的 vue 组件

el: '#app',

也许刀片和 vue 标签 {{}} 之间会有一些问题。也许你可以使用 @{{}} 来指定 vue vars