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警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请务必提供＆＃34; name＆＃34;选项。（在根实例中找到）

我已经注册了

Answer 1

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

首先，省略组件中的-------------------------------- | ID | LogInTime | -------------------------------- | 07 | 2017-01-25 14:41:32 | | 08 | 2017-01-25 14:33:22 | | 07 | 2017-01-25 14:26:28 | | 08 | 2017-01-25 14:18:56 | --------------------------------（单文件组件不需要），并使用kebab-case作为模板中的组件。其次，您似乎缺少name: 'AddFavoriteProduct'道具

id-product

第三，你不在绑定属性中使用插值，甚至不需要将<add-favorite-product :id-product="someProductIdFromSomewhere"></<add-favorite-product>以外的任何内容传递给$event方法

addFavoriteProduct

Answer 2

你收到任何错误吗？

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

如果您想在方法中同时使用事件和product->id，则必须在$event的帮助下docs中传递来自HTML的两个参数

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

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

当您使用camelCase或PascalCase命名组件时，您应该在标记中使用的相应标记名称应该是kebab-cased，如下所示： <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

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

4 个答案: