laravel-vuejs：我的 vuejs 组件没有显示

Question

这个问题似乎已经被问了一百万次，但似乎没有一个能解决我的问题。我是 vuejs 新手，我的 laravel 电子商务网站运行正常，但我想使用 vue 组件作为“添加到购物车”按钮，

我将 exampleComponet.vue 重命名为 addCart.vue，并正确注册了我的组件，但按钮未显示并且出现错误。

未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我在这里尝试了几个答案，包括清除浏览器缓存、将组件注册为Vue.component(name: 'add-cart', require('./components/addCart.vue').default); 都不起作用

我的 addCart.vue：

<template>
     <div>
        <button class="btn btn-primary ml-4" v-text="buttonText"></button>
    </div>
</template>

<script>
    export default {
        name: "btn",
        components: {

                    },
        mounted() {
            console.log('Component mounted.')
        },
        props: ['tag'],

    }
</script>

app.js 文件：

Vue.component('add-cart', require('./components/addCart.vue').default);```

我的产品.blade：

<form action="{{ route('cart.store') }}" method="post">
    {{ csrf_field() }}
    <input type="hidden" name="id" value="{{ $product -> id }}">
    <input type="hidden" name="name" value="{{ $product -> name }}">
    <input type="hidden" name="NewPrice" value="{{ $product -> NewPrice }}">
    <add-cart></add-cart>
</form>

我想使用带有 gloudemans/shoppingCArt 的 vuejs 组件在购物车中添加和删除商品

Answer 1

将组件名称更改为“添加购物车”，例如：

export default {
    name: "add-cart",
}