«Свойство или метод 'xxxx' не определены». На

Question

Я делаю многостраничное vue приложение. (пытаясь не использовать подход SPA) Я беру предлагаемый «Вариант 2» из этого Vuejs js для нескольких страниц, а не для одностраничного приложения

В мой основной шаблон 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 logi c для этой страницы. Это выглядит так

<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

Я что-то упустил? Почему это должно происходить, если это просто имя компонента?

Спасибо за любую помощь!

Answer 1

В раздел «Компоненты» нужно добавить foodcreate

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

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