如何用 vue.js 显示按钮 link？

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

上的controller

我是这样在 app.js 上注册的：

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

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

请帮忙。

更新

存在这样的错误：

[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)

而我已经注册了它

Answer 1

你有任何错误吗？

我在您的代码中看到的一个错误是，您在尝试将 {{ $product->id }} 传递给它时采用了一个参数：event，这似乎是一个 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>

另一个问题是您需要一个道具 idProduct，它没有被传递给组件，您必须像这样在 kebab-case:

中传递它

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

Answer 2

HTML 是 case-insensitive，因此您的自定义按钮元素 <AddFavoriteProduct></AddFavoriteProduct> 被解释为您的 Vue 警告报告：<addfavoriteproduct>

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

Vue 知道从 "dash-letter" 到 "uppercase-letter" 的转换。

Answer 3

我看到的三个修复...

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

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

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

@click="addFavoriteProduct($event)"

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

如何用 vue.js 显示按钮 link？

How to display button link with vue.js?

javascript

laravel

vue.js

laravel-5.3

vuejs2