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>

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

1 个答案: