如何使用 vue.js 显示按钮链接？

Question

我的看法是这样的：

<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上的控制器

我已经像这样在 app.js 上注册了：

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

执行时，按钮收藏夹不出现。

请帮忙。

更新

存在这样的错误：

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

虽然我已经注册了它

Answer 1

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

首先，在您的组件中省略name: 'AddFavoriteProduct'（单文件组件不需要）并在模板中使用kebab-case 作为组件。其次，您似乎缺少 id-product 道具

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

第三，您不会在绑定属性中使用插值，甚至不需要将 $event 以外的任何内容传递给您的 addFavoriteProduct 方法

@click="addFavoriteProduct($event)"

Answer 2

你有什么错误吗？

我在您的代码中看到的一个错误是，您正在使用一个参数：事件，而您试图将 {{ $product->id }} 传递给它，这似乎是一个 laravel 变量。 （对不起，我不知道laravel）

如果您希望在方法中同时使用事件和product->id，则必须从 HTML 传递这两个参数，就像在 docs 中一样，在 $event 的帮助下

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

<script>
    export default{
        name: 'AddFavoriteProduct',  // I am not sure if name is needed, don't remember seeing it in docs
        props:['idProduct'],
        methods:{
            addFavoriteProduct(productId, event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                this.$store.dispatch('addFavoriteProduct', payload)
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        }
    }
</script>

另一个问题是你期待一个 prop idProduct，它没有被传递给组件，你必须像这样在 kebab-case 中传递它：

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

Answer 3

HTML 不区分大小写，因此您的自定义按钮元素 <AddFavoriteProduct></AddFavoriteProduct> 被解释为您的 Vue 警告报告：<addfavoriteproduct>

当您使用 camelCase 或 PascalCase 命名您的组件时，您应该在标记中使用的相应标签名称应该是 kebab-cases ，如下所示： <add-favorite-product></add-favorite-product>

Vue 知道将“破折号”转换为“大写字母”。

Answer 4

我不习惯vuex，因为我通常将自己的商店实现为 POJO 对象 - 没有随着 vuex 的学习曲线毕业。因此无法使用 vuex 提供有效的解决方案，但是据我所知，您需要在组件中导入操作 - 您可以尝试以下操作

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

<script>
    export default{
        props:['idProduct'],
        vuex: {
            actions: {
                setFavoriteProduct: setFavoriteProduct
                // assuming you named the action as setFavoriteProduct in vuex
                // avoid duplicate naming for easy debugging
            }
        }
        methods:{
            addFavoriteProduct(productId, event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                // this.$store.dispatch('addFavoriteProduct', payload)
                this.setFavoriteProduct(payload);
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        },
    }

注意：从 Vuex2 开始，store.dispatch() 只接受一个参数（对于您当前的用例来说不是问题），但是如果您需要将多个参数传递给您的操作，您可以像

store.dispatch('setSplitData',[data[0], data [1]])

// in the action:
setSplitData (context, [data1, data2]) { // uses ES6 argument destructuring

    OR

//... with an object:
store.dispatch('setSplitData',{ 
  data1: data[0], 
  data2: data [1],
})

// in the action:
setSplitData (context, { data1, data2 }) { // uses ES6 argument destructuring
//source: LinusBorg's comment at https://github.com/vuejs/vuex/issues/366