Vuejs TypeError：无法读取未定义的属性“产品”

Question

我正在尝试使用以下product数据：

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: [],
    }
},

使用此方法：

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

这是我的模板

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

再获得一个Runtime Error

V-on处理程序中的错误：“ TypeError：无法读取以下内容的属性'product' 未定义”

Answer 1

尝试使用以下代码一次

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