title: [Vue warn]: Error in v-on handler: "ReferenceError: cartItems is not defined"
body: <p>so i rendering succusfully products , now i want to add the product id to the cart array however once i clicked on the add button it gives me this error 
  [Vue warn]: Error in v-on handler: "ReferenceError: cartItems is not defined"
  hopefully u can give me a hint on how to fix the problem
  thnak you so much</p>
  
  <p>this is the code </p>
  
  <pre><code>   &lt;template&gt;
    &lt;main&gt;
      &lt;div class="margin"&gt;&lt;/div&gt;
      &lt;div class="shopTitle"&gt;
        &lt;h1&gt;Shop&lt;/h1&gt;
      &lt;/div&gt;
      &lt;section&gt;
  
          &lt;div v-if="show" class="products"&gt;
            &lt;div class="product" v-for="product in filteredProducts" :key="product.productId"&gt;
              &lt;div class="imgproduct"&gt;&lt;/div&gt;
  
              &lt;div class="productDetails"&gt;
                &lt;div&gt;
                  &lt;h1&gt;{{product.productTitle}}&lt;/h1&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;p&gt;{{product.productPrice}}&lt;/p&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;i @click="addToCart(product)" class="fa fa-shopping-cart"&gt;&lt;/i&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/section&gt;
    &lt;/main&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        products: [
          {
            id: 1,
            productTitle: "Shoes",
            productImg: "../assets/ProductOne.png",
            productPrice: "246$",
            category: "Shoes"
          },
          {
            id: 2,
            productTitle: "Suits",
            productImg: "../assets/ProductOne.png",
            productPrice: "246$",
            category: "Suits"
          },
          {
            id: 3,
            productTitle: "Bags",
            productImg: "../assets/ProductOne.png",
            productPrice: "246$",
            category: "Bags"
          }
        ],
        selectedCategory: "All",
        show: true,
        cartItems: []
      };
    },
    methods: {
      addToCart(itemToAdd) {
        // Add the item or increase qty
        let itemInCart = this.cartItems.filter(item =&gt; item.id === itemToAdd.id);
        let isItemInCart = itemInCart.length &gt; 0;
  
        if (isItemInCart === false) {
          this.cartItems.push(itemToAdd);
        } else {
        }
        console.log(cartItems)
      }
    }
  };
  &lt;/script&gt;
  </code></pre>