How do i create a shopping cart from this vue.js Object

I have just hit a complete blank.
I have tried many ways but keep having issues or useless code. just need that the push in the right direction

<!DOCTYPE html>
    <html>
        <head>
            <meta charset = "UTF-8">
            <meta name = "viewport width=device-width initial-scale,1.0">
            <title>Furniture Shop</title>
            <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous">
            <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous"></script>      
            <link rel = "stylesheet" type="text/css" href="css/bootstrap.css">
        </head>
        <body>
      <script src = "https://unpkg.com/vue"></script>

How do i use vue.js to make a cart without anything like node.js? i am trying to keep it simple but i have confused myself.

      <!-- gallery First -->
      <!-- Add To Cart Second -->
      <div id="myList">
      </div>
      <div id="gallery"   v-for="(image, index) in data" :key="image.id">                >
        <div class="container">
          <div class="card">
              <div class="row">
                <img :src="image"  width=400px height=auto class="col-md-3">
                  <div class="col-md-12">
                      <p>{{}}</p>
                    <!-- id -->
                    <!-- name -->
                    <!-- price -->
                    <!-- description -->
                    <!-- image -->
                    <!-- add to basket button -->
                  </div>
              </div>
          </div>
        </div>
      </div>               
      </div>

below is my vue object. i want each item to display as a card with an add to cart button

      <script>
          new Vue({
              el: '#gallery',
              data: [
                {id : 1, name : 'Double King Sized Bed', image : '/images/beds/bigWhiteBed.jpg', price : 20000, description : 'A double king sized bed with a white interior and a black cover'},
                {id : 2, name : 'Queen Sized Bed with Storage Drawers', image : '/images/beds/darkDrawerBed.jpg', price : 15000, description : 'A queen sized bed with a dark storage drawer'},
                {id : 3, name : 'King Sized Bed', image : '/images/beds/fancyBed.jpg', price : 12000, description : 'A king sized bed with a white interior and a black cover'},
                {id : 4, name : 'Pine King', image : '/images/beds/fancyPineBed.jpg', price : 8000, description : 'A twin sized bed with a white interior and a black cover'},
                {id : 5, name : 'Queen Sized Bed', image : '/images/beds/royalBed.jpg', price : 15000, description : 'A queen sized bed with a white interior and a black cover'},
                {id : 6, name : 'Glass coffee table', image : '/images/coffee/glassCoffeeTable.jpg', price : 3000, description : 'Stylish Glass Coffee table'},
                {id : 7, name : 'Wooden coffee table', image : '/images/coffee/whiteCoffeeTable.jpg', price : 2000, description : 'White Coffee table'},
                {id : 8, name : 'Wooden Coffee Table on wheels', image : '/images/coffee/whitewheelCoffeeTable.jpg', price : 3000, description : 'Easy To Move coffee table'},
                {id : 9, name : 'Two Piece Coffee table set', image : '/images/coffee/yellowCoffeeTableSet.jpg', price : 2000, description : 'Two tables One Price'},
                {id : 10, name : 'Large Black Leather L-Shaped home Cinema Couch', image : '/images/couches/blackLshape.jpg', price : 30000, description : 'Stylish Black Leather L-Shaped home Cinema Couch '},
                {id : 11, name : 'White Leather reading Lounger', image : '/images/couches/fancyChair.jpg', price : 30000, description : 'Single seated Reading chair'},
                {id : 12, name : 'Black and white Home office desk', image : '/images/desks/blackAndWhiteDesk.jpg', price : 2000, description : 'A Stylish Work Station'},
                {id : 13, name : 'Large L-Shaped Work Station', image : '/images/desks/LshapeOffice.jpg', price : 4000, description : 'A spacious Corner Unit Desk'},
                {id : 14, name : 'Combined Leisure and Home Office Station', image : '/images/desks/officeBed.jpg', price : 13000, description : 'Combine work, relaxation and Play'},
                {id : 15, name : 'Truss Table styled desks', image : '/images/desks/trussTableOfficeDesk.jpg', price : 1500, description : 'Easy to assemble and move'},
                {id : 16, name : 'Jet Black Chair', image : '/images/misc/blackChair.jpg', price : 1000, description : 'A chair for any Environment'},
                {id : 16, name : 'Dinning Room Table', image : '/images/misc/whiteDiningRoomTable.jpg', price : 10000, description : 'Dining Room Table for the family'},
              ],
              methods: {
                addToCart: function(id) {
                  console.log(id);
                }
              }
            });
                
      </script>

        
    </body>

You should change the data object. Make a separate order array, where you can push your sku items to. Everything in your data object is reactive. So every mutation is displayed direct when any change is made. More about this in the docs: https://v2.vuejs.org/v2/guide/reactivity.html

Also, the data object is advertised in the view and instance, so you can use the keys without the data directly in your templates. Same as computed method names you can use as key. Also you can use every key as a watch method name.

I hope this points you in the right direction:

<template>
    <div id="gallery">
        <div v-for="item in skus" :key="item.id">
            <div @click="addToCart(item)">Order {{ item.name }}</div>
        </div>
        <div v-if="total">
            <b>Total in cart: {{ total }}</b>
            <div v-for="item in order" :key="item.id">
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
new Vue({
    el: '#gallery',

    computed: {
        total () {
            return this.order.length;
        }
    },

    data () {
        return {
            order: [],
            
            skus: [
                {id : 1, name : 'Double King Sized Bed', image : '/images/beds/bigWhiteBed.jpg', price : 20000, description : 'A double king sized bed with a white interior and a black cover'},
                {id : 2, name : 'Queen Sized Bed with Storage Drawers', image : '/images/beds/darkDrawerBed.jpg', price : 15000, description : 'A queen sized bed with a dark storage drawer'},
                {id : 3, name : 'King Sized Bed', image : '/images/beds/fancyBed.jpg', price : 12000, description : 'A king sized bed with a white interior and a black cover'},
                // ....
            ],
        }
    },

    mounted () {
        // we could fill this.skus array with data from a json file/api call...
    },

    methods: {
        addToCart: function(item) {
            // Note: This will insert the sku as reference, 
            // so when the skus are changed, the ordered item 
            // will change with it. If you want a separate copy 
            // of the item, you should clone the item object 
            // before pushing it to the order array

            this.order.push(item);
        }
    },

    watch: {
       total () {
           console.log(this.total, this.order);
       }
    }
});
</script>

How do i create a shopping cart from this vue.js Object

1 Answers