I cannot see what i have done wrong, i am trying to add my products to my cart but i am not having any luck. How do i add to cart? i can figure out the delete and clear from understanding how to add to cart. i have read through some documentation and managed to get this far but now i am stuck. i am not sure if i am targeting wrong or i have named something wrong. I used a normal array and it worked alright but i am trying to do it with an api now, does this change the methods?

<section>
            <div class ="container" >
            <div id="app" >
                <div >
                    <div  >
                        <div >
                            <div >
                                <!-- Cart -->
                                <table>
                                    <tr>
                                        <th>Product</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Total</th>
                                    </tr>
                                    <tr v-for="(product, index) in cart">
                                        <td>{{ item.productName }}</td>
                                        <td>{{ item.price }}</td>
                                        <td>{{ item.quantity }}</td>
                                        <td>{{ item.price * item.quantity }} Coins</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <!-- Shop -->
                        <div >
                                <div  v-for="product in products" :key="product.id" >
                                    <div  >
                                        <div >
                                            <div >
                                                <img :src="product.productImage" alt="Product Img">
                                                <h4 >{{ product.productName }}</h4>                                            
                                                <h4 >{{ product.price }} Coins</h4>
                                                <p >{{ product.productDescription }}</p>
                                                <input type="number" name="quantity"  value="1">
                                                <input type="hidden" name="productName" value="{{productID}}">
                                                <input type="hidden" name="price" value="{{productID.price}}">
                                                <input type="submit" name="add_to_cart" @click="addToCart"   value="Add to Cart">                                                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>                
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                products: '',
                cart: []
            },
            methods: {
                getproducts: function () {
                    axios.get('http://localhost:8888/DevsDev2022/productAPI/products')
                    .then(function (response) {
                        app.products = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                addToCart: function (product) {
                        var cartItem = this.cart.find(item => item.productName === product.productName);
                        if (cartItem) {
                            cartItem.quantity  ;
                        } else {
                            this.cart.push({
                                productName: product.productName,
                                price: product.price,
                                quantity: 1
                            });
                        }
                    },
                    removeFromCart: function (product) {
                        var cartItem = this.cart.find(item => item.productName === product.productName);
                        if (cartItem.quantity > 1) {
                            cartItem.quantity--;
                        } else {
                            this.cart.splice(this.cart.indexOf(cartItem), 1);
                        }
                    },
                    clearCart: function () {
                        this.cart = [];
                    }
                },
            mounted: function () {
                this.getproducts();
            }
        });
        </script>

CodePudding user response：

You are missing your template tag around your template

CodePudding user response：

Please take a look at following snippet:

new Vue({
  el: '#app',
  data() {
    return {
      products: [{id: 1, productName: 'aaa', price: 25, productDescription: 'rrrrrrr'}, {id: 2, productName: 'bbb', price: 35, productDescription: 'eeeee'}],
      cart: []
    }
  },
  methods: {
    getproducts() {
        /*axios.get('http://localhost:8888/DevsDev2022/productAPI/products')
        .then(function (response) {
            app.products = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });*/
    },
    addToCart(product) {
      var cartItem = this.cart.find(item => item.productName === product.productName);
      if (cartItem) {
        cartItem.quantity  ;
      } else {
        this.cart.push({
          productName: product.productName,
          price: product.price,
          quantity: 1
        });
      }
    },
    removeFromCart(product) {
      var cartItem = this.cart.find(item => item.productName === product.productName);
      if (cartItem.quantity > 1) {
        cartItem.quantity--;
      } else {
        this.cart.splice(this.cart.indexOf(cartItem), 1);
      }
    },
    clearCart() {
      this.cart = [];
    }
  },
  mounted: function () {
    this.getproducts();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <section>
    <div class ="container" >
      <div >
        <div  >
          <div >
            <div >
                <!-- Cart -->
              <table>
                <tr>
                  <th>Product</th>
                  <th>Price</th>
                  <th>Quantity</th>
                  <th>Total</th>
                </tr>
                <tr v-for="(product, index) in cart">
                  <td>{{ product.productName }}</td>
                  <td>{{ product.price }}</td>
                  <td>{{ product.quantity }}</td>
                  <td>{{ product.price * product.quantity }} Coins</td>
                </tr>
              </table>
            </div>
          </div>
          <!-- Shop -->
          <div >
            <div  v-for="product in products" :key="product.id" >
              <div  >
                <div >
                  <div >
                    <img :src="product.productImage" alt="Product Img">
                    <h4 >{{ product.productName }}</h4>                                            
                    <h4 >{{ product.price }} Coins</h4>
                    <p >{{ product.productDescription }}</p>
                    <input type="number" name="quantity"  value="1">
                    <input type="hidden" name="productName" :value="product.name">
                    <input type="hidden" name="price" :value="product.price">
                    <input type="submit" name="add_to_cart" @click="addToCart(product)"   value="Add to Cart">                                                    
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>                
</div>