push 不是函数 vuejs答案

【问题标题】：push is not a function vuejspush 不是函数 vuejs
【发布时间】：2019-12-11 14:00:16
【问题描述】：

我正在使用 VueJS 和 Laravel 制作应用程序。我收到一个错误，当我单击添加到购物车按钮时，推送不是一个功能。一切都在这里工作正常，但方法 addToCart 给出错误推送不是一个函数。当我第一次单击添加到购物车按钮时，它会给出该错误，一旦我刷新页面，我就可以在购物车中看到一个产品，如果单击添加到购物车按钮，这次没有看到错误，效果很好。当 cart[] 为空时，它会给出错误 push is not a function，但是当 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>

【问题讨论】：

难道this.cart= response.data 中的response.data 属性不是数组吗？
@JaromandaX 是的 response.data 不是数组，它是字符串我现在如何使它工作。谢谢

标签： javascript laravel vue.js

【解决方案1】：

我不确定这是否能解决您的问题，但没有必要这样做：

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

因为你有product 作为组件的prop，所以应该是@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 解决您的问题。

【讨论】：