时间戳

首页 > 解决方案 > laravel-vuejs：我的 vuejs 组件没有显示

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

问题描述

这个问题似乎已经被问了一百万次，但似乎没有一个能解决我的问题。我是 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);```

我的产品刀片：

<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 组件来添加和删除购物车中的商品

标签： htmllaravelvue.jslaravel-5

解决方案

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

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

推荐阅读