CODEWITHSUNDEEP
vue.js
h1dd3n
h1dd3n

Reputation: 292

Vuejs TypeError: Cannot read property 'product' of undefined

I'm trying to use this product data:

data() {
    return {
        sitename: 'Vue.js Pet Depot',
        product: {
            id: 1001,
            title: 'Cat Food, 251lb bag',
            description: 'A 25 pound bag of <em>irresistible</em>,' +
            'organic goodness for your cat.',
            price: 2000,
            image: require('./assets/images/product-fullsize.jpg'),
        },
        cart: [],
    }
},

With this method:

methods: {
    addToCart: () => {
        console.log(this.product.title + ' was added to cart');
        // this.cart.push(this.product.id)
    }
}

This is my template:

<button class="default" v-on:click="addToCart">
    Add to cart
</button>

Getting another Runtime Error

Error in v-on handler: "TypeError: Cannot read property 'product' of undefined"

Upvotes: 0

Views: 320

Answers (1)

Sowmyadhar Gourishetty
Sowmyadhar Gourishetty

Reputation: 1878

Try with the below code once

methods: {
            addToCart: function() {
                console.log(this.product.title + ' was added to cart');
                // this.cart.push(this.product.id)
            }
        }

Upvotes: 1

Related Questions