laravel - “未定义属性或方法‘xxxx’。” 上
问题描述
我制作了一个多页的 vue 应用程序。(尽量不使用 SPA 方法)我从这个Vuejs js 中为多页而不是单页应用程序采用建议的“选项 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.
此错误中的属性/方法更改为我设置@extends('layouts.app', ['component' => 'mealcreate'])
的内容meal-create.blade.php
我错过了什么吗?当它只是一个组件的名称时,为什么会发生这种情况?
谢谢你的帮助!
解决方案
您需要将 mealcreate 添加到 components 部分
Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);
const app = new Vue({
el: "#app",
components: {
mealcreate // <-- this
}
});
推荐阅读
- database - 如何正确管理连接和断开?
- c# - 并行处理许多 API 请求与异步/等待
- java - 为什么接口类型不能调用“子类”对象的未实现的公共方法?
- android - 在代码中获取android关闭原因
- javascript - Material-UI useMediaQuery 最初没有识别出正确的断点
- swiftui - 已发布属性更改不更新界面
- css - 身体方向 rtl 时覆盖 Scss 变量值
- html - 如何修复无法加载资源状态 404 github 页面
- python - AttributeError:dlsym(RTLD_DEFAULT,AttachDebuggerTracing):找不到符号
- javascript - 尝试从 Nodejs 中的 UniswapV2 工厂订阅 PairCreated 事件