我如何從這個 vue.js 對象創建購物車

Question

我剛剛完全空白。
我嘗試了很多方法，但總是遇到問題或無用的代碼。 只需要朝着正確的方向推動

<!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>

我如何使用 vue.js 制作沒有 node.js 之類的購物車？ 我試圖保持簡單，但我自己搞糊塗了。

      <!-- 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>

下面是我的 vue 對象。 我希望每件商品都顯示為帶有添加到購物車按鈕的卡片

      <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>

Answer 1

您應該更改數據對象。 制作一個單獨的order數組，您可以將您的 sku 商品推送到其中。 數據對象中的所有內容都是反應式的。 因此，當進行任何更改時，每個突變都會直接顯示。 更多關於這個的文檔： https ://v2.vuejs.org/v2/guide/reactivity.html

此外，數據對象會在視圖和實例中公布，因此您可以直接在模板中使用沒有data的鍵。 與可用作鍵的計算方法名稱相同。 您也可以將每個鍵用作監視方法名稱。

我希望這會為您指明正確的方向：

<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>

我如何從這個 vue.js 對象創建購物車

問題描述

1 個解決方案

解決方案1
2 已采納 2021-08-02 18:29:19

我如何從這個 vue.js 對象創建購物車

問題描述

1 個解決方案

解決方案1 2 已采納 2021-08-02 18:29:19

解決方案1
2 已采納 2021-08-02 18:29:19