“未定义属性或方法'xxxx'。”在

问题描述 投票:1回答:1

我制作了多页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实例的页面,我有这个。 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.

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

我想念什么吗?当它只是一个组件的名称时,为什么会发生这种情况?

感谢您的帮助!

我制作了多页Vue应用。 (尝试不使用SPA方法)我正在从此Vuejs js中获取建议的“选项2”用于多个页面,而不是用于单个页面应用程序。在我的主布局中。 [

您需要将meatcreate添加到组件部分
Vue.component('mealcreate', require('./page-components/MealCreate.vue').default); const app = new Vue({ el: "#app", components: { mealcreate // <-- this } });
laravel vue.js
1个回答
1
投票
© www.soinside.com 2019 - 2024. All rights reserved.