Javascript 如何使用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>

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

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

请帮忙

更新

存在如下错误：

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

---

而我已经注册了它

你有什么错误吗

我在代码中看到的一个错误是，当您试图将

{{{$product->id}}

传递给它时，您使用了一个参数：event，这似乎是一个laravel变量。（对不起，我不认识拉威尔）

如果您希望在方法中同时使用事件和

product->id

，则必须从HTML中传递这两个参数，就像在

$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>

---

你有什么错误吗

我在代码中看到的一个错误是，当您试图将

{{{$product->id}}

传递给它时，您使用了一个参数：event，这似乎是一个laravel变量。（对不起，我不认识拉威尔）

如果您希望在方法中同时使用事件和

product->id

，则必须从HTML中传递这两个参数，就像在

$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>

---

HTML不区分大小写，因此您的自定义按钮元素

将被解释为您的Vue警告报告：

当您使用camelCase或PascalCase命名组件时，您应该在标记中使用的相应标记名应该是kebab-case，如下所示：

---

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

HTML不区分大小写，因此您的自定义按钮元素

将被解释为您的Vue警告报告：

当您使用camelCase或PascalCase命名组件时，您应该在标记中使用的相应标记名应该是kebab-case，如下所示：

---

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

我可以看到三个修复程序

首先，在组件中省略

名称：“AddFavoriteProduct”

（对于单文件组件不是必需的），并用于模板中的组件。其次，您似乎缺少

id产品

prop

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

---

我可以看到三个修复

首先，在组件中省略

名称：“AddFavoriteProduct”

（对于单文件组件不是必需的），并用于模板中的组件。其次，您似乎缺少

id产品

prop

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

---

我不习惯于

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);
            }
        },
    }

---

我不习惯于

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);
            }
        },
    }

---

您是否正在使用任何其他组件，或者这是您正在尝试的第一个组件，如果可能，还可以添加整个App.js。您使用的是哪个版本的vueusing@Saurabh，是的，我有另一个组件。另一个组件运行良好您是否使用其他组件，或者这是您尝试的第一个组件，如果可能，您还可以添加整个App.js。您使用的是哪个版本的vueusing@Saurabh，是的，我有另一个组件。另一个组件工作得很好。谢谢它起作用了。但当单击按钮收藏夹时，存在错误：

[vuex]未知操作类型：addFavoriteProduct

@mosostoh错误表示

vuex

找不到操作

addFavoriteProduct

。您是否在vuex商店中声明/定义了操作？@Donkarnash，是的。vuex中的动作store@Phil）看这个：太好了。谢谢它起作用了。但当单击按钮收藏夹时，存在错误：

[vuex]未知操作类型：addFavoriteProduct

@mosostoh错误表示

vuex

找不到操作

addFavoriteProduct

。您是否在vuex商店中声明/定义了操作？@Donkarnash，是的。vuex中的动作store@Phil，似乎我再次需要你的帮助：）看这个：似乎我再次需要你的帮助：）看这个：似乎我再次需要你的帮助：）看这个：