Question

我正在尝试使用laravel + vue制作购物车，这里的主要问题在于vue。

在我的购物车组件中，您只需单击一下即可添加/删除产品，如果有产品添加到购物车中，我想将CSS应用于产品卡。

我为此创建了一个计算属性，并向产品卡节点添加了类绑定，但出现以下错误：

[Vue warn]: Error in render: "TypeError: _vm.isAlreadyAdded is not a function"

found in

---> <PRODUCTlchoice1> at resources/js/components/products/PRODUCTchoice1.vue

这是我的组成部分：

<template>
<div style="width:100%; height:auto; display:flex; flex-direction:column;">
        <div style="width:100%; height:auto; display:flex; flex-wrap:wrap; padding:10px;">
            <div :class="{ 'selected_product' : isAlreadyAdded(product.id) }" class="product" v-for="product in productcategory.products" :key="product.id" @click.self="selectProduct(product, $event)" style="width:31%; height:60px; border:0px solid black; background-color:rgb(235,235,235); margin:10px 10px; display:flex; align-items:center; padding:0px 5px 0px 20px; cursor:pointer;">
                <span style="font-size:20px; color:rgba(0,0,0,0.9);">{{ product.title }}</span>
                <div class="add_button" style="width:40px; height:40px; border-radius:2px; display:flex; align-items:center; justify-content:center; margin:0px 0px 0px auto; background-color:rgb(135, 229, 81);">
                    <i class="fa fa-plus" style="font-size:25px; color:white;"></i>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
name: 'PRODUCTlchoice1',


computed: {
    isAlreadyAdded: function(productId){
        return this.cartItem.find( cartItem => cartItem.id == productId);
    }

},


data() {
    return {
        cartItem: [],
        cartItems: [],
    }
},


props: {
    productcategories: { required:true }
},


mounted() {
    console.log(this.$options.name+' component successfully mounted');
},


methods:{

    selectProduct: function( product, event){

       //add or remove product logic

    },


}


};
</script>
<!--STYLES-->
<style scoped>
.product:hover{background-color:rgb(135, 229, 81) !important;}
.selected_product{background-color:var(--web_primary_color) !important; color:white; border:2px solid rgb(56,56,56);}
</style>

我的代码有什么问题？我应该使用计算属性（这是反应性afaik吗？），我知道我可以捕获单击的事件目标并使用CSS来应用类，但建议我不要这样做。

有什么想法或建议吗？

谢谢！

Answer 1

您的问题是，如错误所示，您的计算属性isAlreadyAdded不是函数。

但是是！

好吧，您将计算的属性定义为函数，这是正确的。但是您必须将它们用作属性。

现在，您无法执行此操作，因为您的isAlreadyAdded需要使用product参数。 product用于v-for指令，因此您不能在计算属性本身中引用此指令（可以，product应该是prop）。因此，您有两种选择：

只需使用一种方法

这是更简单的一个。它要比计算的属性性能差，但它只能工作，而且我保证所有用户都很难注意到性能成本。

创建为每种产品呈现的新组件

如果不是为每个产品渲染一个<div>而是渲染另一个Vue组件，而是假设<my-product>并通过product作为道具，则可以在该组件，因为现在product将是一个道具，因此可以通过计算属性来访问。

当心！

由于这种计算的逻辑仍然需要父级的cartItem，所以这也许不是可行的方法。事情将比看起来复杂得多。

添加一个额外的组件来处理产品可能很好，但是在这种情况下，我将计算是否将它们添加到购物车中，或者不仅仅使用父级中的Vue方法。

Answer 2

isAlreadyAdded实际上不是用例中的计算属性。这是一种方法，应将其移至组件的methods部分。

在类属性绑定中引用isAlreadyAdded方法会使它对该方法的结果具有反应性。

Vue：如果产品在购物车中，请使用CSS类

2 个答案:

只需使用一种方法

创建为每种产品呈现的新组件