我制作了多页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”用于多个页面,而不是用于单个页面应用程序。在我的主布局中。 [
Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);
const app = new Vue({
el: "#app",
components: {
mealcreate // <-- this
}
});