david001
1 year ago
4212
19
Vue

vue js push is not a function

Posted 1 year ago by david001

Hi, i am making a small app with laravel and vuejs. I'm getting an error, the push is not a function when I clicked an add to cart button. Everything is working here fine but methods addProductToCart gives error push is not a function. when I first click add product to cart button it gives that error and once I refresh the page I can see a product in cart and again if click adds to cart button this time error is not seen, works perfectly. when cart[] is empty it gives error push is not a function, but when cart[] has at least one element I don't get that error. Any help would be greatly appreciated.


<div v-for="product in products" >
          <div class="card" >
            <div class="card-header">{{product. name}}</div>

            <div class="col-md-4">

                <div class="card-body">
                        <img :src="product.image">
                        <p>{{product.price}}</p>
                        <p>{{product.category_id}}</p>
                    </div>
                <button class="btn btn-primary"  @click="addProductToCart(product)">
                 
                </button>
                </div>

            </div>
        
     
        
        </div>


<script>
    export default {

        data:function(){
            return {
                products:[],
                
                cart:[]

            }

        },
        methods:{


            addProductToCart(product){
                var app = this;
                      
                    app.cart.push(product)


                axios.get('/cart',{

                     params: {
                        product: product,
                    }

                }).then((response)=>{

                });

            
            }
,
 mounted() {
                console.log('Product mounted.')
                var app = this;
                axios.get('/products')
                    .then(function (resp) {
                        app.products = resp.data;
                    })
                    .catch(function (resp) {
                        console.log(resp);
                        alert("Could not load companies");
                    });

                   
//if i replace this part it works fine
                    axios.get('/list')

                    .then(function (resp) {
                        app.cart = resp.data
                        
                    })

            }
        
            }
</script>

my /products return data in below format


[
{
id: 1,
name: "Keyshawn McDermott Sr.",
description: "Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.",
category_id: 1,
price: 59,
image: "http://loremflickr.com/400/300?random=36",
created_at: "2019-07-16 10:12:27",
updated_at: "2019-07-16 10:12:27",
qty: 1
},
{
id: 2,
name: "Marlene Reichert",
description: "Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.",
category_id: 3,
price: 76,
image: "http://loremflickr.com/400/300?random=71",
created_at: "2019-07-16 10:12:27",
updated_at: "2019-07-16 10:12:27",
qty: 1
},

{
id: 19,
name: "Syble Turner PhD",
description: "Consequatur aut et eos sunt blanditiis vel. Tempore ut labore enim eos. Quia cupiditate vel nihil eius repellendus.",
category_id: 9,
price: 231,
image: "http://loremflickr.com/400/300?random=18",
created_at: "2019-07-16 10:12:27",
updated_at: "2019-07-16 10:12:27",
qty: 1
},
{
id: 20,
name: "Dayana Macejkovic",
description: "Sit quo qui et consequuntur culpa. Quia occaecati sunt sequi recusandae est. Ea autem doloremque odio dolores ut.",
category_id: 1,
price: 285,
image: "http://loremflickr.com/400/300?random=1",
created_at: "2019-07-16 10:12:27",
updated_at: "2019-07-16 10:12:27",
qty: 1
}

Please sign in or create an account to participate in this conversation.