Question

我正在使用 VueJS 和 Laravel 制作应用。我收到一个错误消息，当我单击“添加到购物车”按钮时，推送不起作用。一切都在这里正常工作，但是方法addToCart提供错误推送不是函数。当我第一次单击“添加到购物车”按钮时，它给出了该错误，并且刷新页面后，我可以看到购物车中的产品，如果再次单击“添加到购物车”按钮，则此错误没有出现，效果很好。当cart []为空时，它给出错误推送不是一个函数，但是当cart []具有至少一个元素时，我不会收到该错误。任何帮助将不胜感激。

productlist.vue

<template>
    <div class="col-md-7">


<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">{{ product.name }}</h5>
    <p class="card-text">{{ product.price }}


    </p>

    <button class="btn btn-primary" @click="addProductToCart(product)">Add to cart</button>
  </div>
</div>

    </div>
</template>

<script type="text/javascript">
    export default{
        props:['product'],
        data(){
            return{



            }
        },

        methods:{
            addProductToCart(product){

                axios.post('/products/create',{

                    product : product
                }).then((response)=>{
                console.log(response)
                this.$emit('addedToCart',product)



            });

            }
        }
    }
</script>

cart.vue

<template>
    <div class="col-md-4">
        <li v-for="(item,index) in cart">
            {{ item.name }}-{{ item.price }}
            <button @click="removeitem(index)">Remove</button>
        </li>

    </div>
</template>

<script type="text/javascript">
    export default{
        props:['cart'],

        }
</script>

Main.vue

<template>
    <div>
        <div class="col-md-7" v-for="product in products">
            <Productlist :product="product" @addedToCart="addedToCart"></Productlist>
        </div>
        <Cart :cart="cart" ></Cart>
    </div>
</template>

<script type="text/javascript">
import Productlist from './Productlist';
import Cart from './Cart';

    export default{
        data(){
            return{
                products:[],
                cart: [ ]
            }
        },
        mounted() { 

            //get all products and show in page
            axios.get('/products')
            .then((response)=>{
                this.products = response.data;
            });

            // get only those products that are added to cart
            axios.get('/list')
            .then((response)=>{
                this.cart= response.data;
                console.log(response)
            });
        },
        methods:{
            addedToCart(product){


                this.cart.push(product)
            }
        },
        components:{Productlist,Cart}
    }
</script>

Answer 1

我不确定这是否可以解决您的问题，但不必要：

<button class="btn btn-primary" @click="addProductToCart(product)">Add to cart</button>

因为您拥有product作为组件的支柱，所以应该@click="addProductToCart"没问题。而您的方法应该是这样的：

addProductToCart() {
  axios
    .post('/products/create', {
      product: this.product,
    })
    .then(response => {
      console.log(response);
      this.$emit('addedToCart', this.product);
    });
}

还有一件事，当您向父组件发出消息时，请使用kebab-case调用键字符串：

this.$emit('addedToCart', this.product);

替换为：

this.$emit('added-to-cart', this.product);

然后在您的父组件中拥有：

<Productlist :product="product" @addedToCart="addedToCart"></Productlist>

替换为：

<Productlist :product="product" @added-to-cart="addedToCart"></Productlist>

我猜这最后的事情将根据Vue documentation解决您的问题。

push不是函数vuejs

1 个答案: