“未定义属性或方法‘xxxx’。”在 <component v-bind:is="xxxx">

Question

我正在制作一个多页面的 vue 应用。 （尽量不使用 SPA 方法）我正在从 Vuejs js for multiple pages, not for a single page application 中采用建议的“选项 2”@

在我的主要layout.blade.php 模板中，我有这个。

<div id="app">
    @if (isset($component))
        <component v-bind:is={{ $component }} inline-template>
            <div>
    @endif

        @yield('content')

    @if (isset($component))
            </div>
        </component>
    @endif
</div>

然后对于将使用 vue 实例的页面，我有这个 ie。 meals-create.blade.php

@extends('layout.app', ['component' => 'mealcreate']) // This sets the component name for layout.blade.php

@section('content')

   // Page Content Here...

@endsection

我在resources/js/page-components/MealCreate.vue 中保存了一个组件，它将包含该页面的所有 vue 逻辑。好像是这样的

<script>
    export default {

        data() {
            return {
              // Some data ....
            };
        },
        created() {
           // ....
        },

        methods: {
            // ......
        }
    };
</script>

在我的resources/js/app.js 中，我正在像这样加载组件和 vue 实例

// Page Components
Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);

const app = new Vue({
    el: "#app",
});

但是现在当我加载页面时出现此错误：

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

此错误中的属性/方法更改为我在meal-create.blade.php 中设置的@extends('layouts.app', ['component' => 'mealcreate'])

我错过了什么吗？当它只是一个组件的名称时，为什么会发生这种情况？

感谢您的帮助！

Answer 1

你需要在组件部分添加mealcreate

Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);

const app = new Vue({
    el: "#app",
    components: {
        mealcreate   // <-- this
    }
});