vue js push is not a function

@david001

Why are you sending the params with a get request? I think you want to send a post request once the user hit submit checkout. try this

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

console.log(product);

}
                

Are you getting the product on console?

This part

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

Can be converted to this:

this.card.push(product)

In general this should just work out of the box! Because you reassign this to app you might get this issue!

@rameezisrar No, i'm not getting anything in console. when i submit button i got this error

app.js:38298 [Vue warn]: Error in v-on handler: "TypeError: app.cart.push is not a function"

found in...```

@david001 then try as Bobby said

this.card.push(product)

i did , i got same error

Something is changing what cart is; can you open the Vue devtools and see what cart is whenever the error occurs?

@david001 I think you are missing the template tags

<template>

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

</template>

i have in full code. That was part of code

@tykus , in dev tool i can see

cart:""
products:Array[20]

@david001 try this

<div v-for="(product, index) in products" :key="product.id" >
          <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>

cart:""

that'll be why the push is not working - what else modifies cart??

@bobbybouwmann

Still i got same error, push is not a function in dev tool i can see

cart:""
 products:Array[20]

@tykus what you mean by what else modifies cart??

You are initialising the cart as an empty array; but in devtools it is an empty string; so, something is changing it. Are we seeing all of the methods? Do you have some method to empty the cart perhaps?

@tykus yes your guess is right: in mounted i have this part:

   axios.get('/list')

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

i need above part because when user refresh the page all data will be lost. so i use push to show live data in page and above to fetch same data even after page reloaded. Anyway other ways where i can show data to user as shown as added and remain same even after page reloaded

my mounted

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
                        
                    })

            }
        }

So the response data is empty; if you check for that you can ensure the cart is still an array

axios.get('/products').then(function (resp) {
    app.products = resp.data || []; // an empty string is falsey so cart gets an empty array instead.
}).catch(function (resp) {
    console.log(resp);
    alert("Could not load companies");
});

If you own the api endpoint, you could otherwise ensure that the response is an empty JSON array

I made changes according to yours. But still same error, push is not a function

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 products");
                    });

                    axios.get('/list')

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

            }

Sorry, I edited the wrong part:

axios.get('/list').then(function (resp) {
    app.cart = resp.data || [];
})

Leave the products assignment as it is, to ensure you always are iterating over an array.

@tykus works beautifully!!, Thank you so much