带有 Laravel 的 Vue.js 未知自定义元素（已经检查过其他答案）

Question

我的app.js

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Buefy from 'buefy'
Vue.use(Buefy)


// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('edit-delete-dropdown', require('./components/Dropdown.vue').default);
Vue.component('flash-message', require('./components/FlashMessage.vue').default);
Vue.component('store-create-form', require('./components/StoreCreateForm.vue').default);

const app = new Vue({
  el: '#app'
});

我的 StoreCreateForm.vue

<template>
<section>
  <h1 class="title"> Create a new store </h1>

  <form :action="createRoute" method="post" role="form">
    <input type="hidden" name="_token" :value="csrfToken">

    <b-field label="Name">
        <b-input placeholder="Store Name" icon-pack="fas" icon="store">
        </b-input>
    </b-field>

    <b-field label="Address">
        <b-input placeholder="Store Address" icon-pack="fas" icon="location-arrow">
        </b-input>
    </b-field>

    <b-field label="Description">
        <b-input type="textarea" placeholder="Store Description" icon-pack="fas" icon="info-circle">
        </b-input>
    </b-field>

    <b-field>
        <button type="submit" name="button" class="button is-primary"> Create </button>

        <a class="button is-light" :href="previousUrl"> Cancel </a>
    </b-field>

  </form>
</section>
</template>

<script>
export default {
  props: {
    createRoute: String,
    csrfToken: String,
    previousUrl: String,
  }
}
</script>

故事是我在另一个刀片文件中使用了该元素：

<store-create-form
     create-route="{{ route('users.stores.store', auth()->user()) }}"
     csrf-token="{{ csrf_token() }}"
     previous-url="{{ url()->previous() }}">
 </store-create-form>

而 Vue 给了我警告

**[Vue warn]: Unknown custom element: <store-create-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.** 

即使我可以在我的应用程序中使用其他两个组件 'edit-delete-dropdown' 和 'flash-message'，也不会显示该组件。当有变化时，我也会运行 npm run watch 来编译文件。

我已经在 StackOverflow 和其他论坛上查看了其他答案，但似乎没有任何效果。

对这个麻烦有什么想法吗？

您的帮助将不胜感激。

// 更新：

我认为问题出在 Laravel Mix 上。我尝试更改其他组件中的某些内容，来自 Mix 的通知是“构建成功”，但它在视图中没有改变（昨天它仍然工作得很好）

只需在“网络”选项卡 (F12) 中禁用缓存，一切正常！

感谢您的帮助！

Answer 1

你需要给你的组件一个“名字”

<script>
  export default {
    name: 'store-create-form'
    props: {
      createRoute: String,
      csrfToken: String,
      previousUrl: String,
    }
  }
</script>