如何用vue.js显示按钮链接？ [英] How to display button link with vue.js?

问题描述

我的观点是这样的：

<div class="panel panel-default panel-store-info">
    ...
    <div id="app">
        <AddFavoriteProduct></AddFavoriteProduct>
    </div>
    ....
</div>

我的组件是这样的：

<template>
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }})">
        <span class="fa fa-heart"></span>&nbsp;Favorite
    </a>
</template>

<script>
    export default{
        name: 'AddFavoriteProduct',
        props:['idProduct'],
        methods:{
            addFavoriteProduct(event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                this.$store.dispatch('addFavoriteProduct', payload)
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        }
    }
</script>

当点击按钮收藏时，它将调用laravel上的控制器

When click button favorite, it will call controller on the laravel

我已在app.js上注册如下：

I had register on the app.js like this :

...
import AddFavoriteProduct from './components/AddFavoriteProduct.vue';
...
components: {
                ...
                AddFavoriteProduct
            },
...

执行时，按钮收藏夹不显示。

When executed, the button favorite does not appear.

请帮助。

更新

存在如下错误：

[Vue警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供名称选项。 （在根实例中找到）

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance)

我已经注册了

推荐答案

我可以看到三个修复...

Three fixes that I can see...

首先，省略 name：'AddFavoriteProduct'在您的组件中（单文件组件不需要）并使用烤肉串案例。其次，您似乎缺少 id-product prop

First, omit name: 'AddFavoriteProduct' in your component (it's not required for single-file components) and use kebab-case for the component in your template. Second, you appear to be missing the id-product prop

<add-favorite-product :id-product="someProductIdFromSomewhere"></<add-favorite-product>

第三，你不在绑定属性中使用插值，你甚至不需要传递任何东西除了 $ event 到你的 addFavoriteProduct 方法

Third, you don't use interpolation in bound properties and you don't even need to pass anything other than the $event to your addFavoriteProduct method

@click="addFavoriteProduct($event)"

这篇关于如何用vue.js显示按钮链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！