javascript - 为什么 Vue 无法注册我的组件?
问题描述
我在文件中编写了以下 Vue 组件app/resources/js/components/class/createComponent.vue
:
<template>
<div class = "container">
<div class = "row justify-content-center">
<div class = "col-md-8">
<div class = "card card-default">
<div class = "card-header">Create Class</div>
<form action = "api/class/store" method = "POST" @submit = "createClass()">
<div class = "form-group">
<input type = "text" name = "name" v-model = "name" placeholder = "Class Name" class = "form-control">
</div>
<div class = "form-group">
<input type = "submit" value = "Submit" class = "btn btn-info">
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "createComponent",
data() {
return {
name : ''
}
},
methods: {
createClass() {
axios.post('api/class/store', {
name: this.name
})
}
}
}
</script>
<style scoped>
</style>
我因此在以下位置注册组件app/resources/js/app.js
:
Vue.component('class-create', require('./components/class/createComponent.vue').default);
但是,HTML 无法加载元素home.blade.php
并出现以下错误:
[Vue warn]: Unknown custom element: <class-create> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
奇怪home.blade.php
的是,加载<example-component>
罚款,但无法加载我的自定义组件。有人可以识别我做错了什么吗?谢谢。
编辑. 这可能与编译app.js
文件有关,public/js
而不是resources/js
?
解决方案
推荐阅读
- typescript - 打字稿切换枚举键
- vue.js - Vue 中包装内容的插槽
- inspec - 使用输入在 Inspec 中构建字符串
- python - 更新 matplotlib 图中的文本
- android - 没有从 jetpack compose 中的 rememberLauncherForActivityResult() 获取结果
- c++ - UPNP 检测网络中的设备?
- laravel - 如何使用控制器导入数据以在 Laravel 8 中查看。*
- java - Elasticsearch client.indices().putTemplate - 不推荐使用的方法
- java - 在 Spring boot 中查找传入请求的 Content-type
- jboss - JBOSS 6.3 访问日志自动删除