个人中心
gpt4 book ai didi

javascript - 我如何从这个 vue.js 对象创建购物车

转载 作者：行者123 更新时间：2023-12-04 12:28:27 24 4
gpt4 key购买 nike

我刚刚完全空白。
我尝试了很多方法，但总是遇到问题或无用的代码。只需要朝着正确的方向插入

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

最佳答案

您应该更改数据对象。单独制作 order数组，您可以将您的 sku 项目推送到其中。数据对象中的所有内容都是响应式(Reactive)的。因此，当进行任何更改时，每个突变都会直接显示。更多关于这个的文档:https://v2.vuejs.org/v2/guide/reactivity.html
此外，数据对象在 View 和实例中公布，因此您可以使用没有 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>

关于javascript - 我如何从这个 vue.js 对象创建购物车，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68626294/

24 4 0
文章推荐： python - 除以大整数时，Numpy 转换为 python float，这是一个错误吗？
文章推荐： Swift 5.5 异步操作作为 optional 默认值
文章推荐： reactjs - React - 将 child 分成几部分
文章推荐： python - 如何增加子图文本大小并添加自定义条形图注释
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com