Vueはショッピングカートのシーンでの応用を実現します。


本論文の実例では、Vueのショッピングシーンの応用を共有しています。参考にしてください。具体的な内容は以下の通りです。
ショッピングカートシーンの需要:
1.商品、店舗、ショッピングカートの選択
2.商品の削除
キーコード
テストデータ

var _list = [{
 checked: false,
 goods: [{
  name: "  1",
  price: 23,
  checked: false
 }]
}, {
 checked: false,
 goods: [{
  name: "  2",
  price: 20,
  checked: false
 }, {
  name: "  3",
  price: 30,
  checked: false
 }]
}];
お店の対象はショッピングカーの行列です。リスト
商品の対象となる店舗の対象商品群goods
商品や店舗ごとに自分のチェックフィールドがあります。
一.商品を選ぶ
  • 商品を選択します。
  • 店舗の下のすべての商品を選択します。
  • ショッピングカートの中のすべての商品を選択します。
  • データーバインディング
    
    <body class="app">
     <input type="checkbox" v-if="list.length" v-model="checkedAll">
     <div v-for="(shopI, shop) in list" class="shop">
      <input type="checkbox" v-model="shop.checked">
      <div v-for="(goodI, good) in shop.goods" class="good">
       <input type="checkbox" v-model="good.checked">
       <span v-html="good.name"></span>
       <span v-html="good.age"></span>
      </div>
     </div>
    </body>
    
    
    var vue = new Vue({
     el: '.app',
     data: {
      list: _list
     }
    });
    
    ショッピングカートの全選択を監督します。
    
    computed: {
     checkedAll: function() {
      return this.checkedShopsCount == this.list.length;
     },
     checkedShopsCount: function() {
      var i = 0;
      this.list.forEach(function(item) {
       if (item.checked == true) i++;
      });
      return i;
     }
    }
    
    店舗選択数が店舗数(list.length)に等しい場合、ショッピングカートは全てtrueとなります。
    商品&店舗選択イベント
    
    <input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
    <div v-for="(shopI, shop) in list">
     <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
     <div v-for="(goodI, good) in shop.goods">
      <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
      <span v-html="good.name"></span>
      <span v-html="good.age"></span>
     </div>
    </div>
    
    
    methods: {
     setAllChecked: function(e) {
      this.list.forEach(function(shop) {
       shop.checked = e.target.checked;
       shop.goods.forEach(function(good) {
        good.checked = e.target.checked;
       });
      });
     },
     setGoodChecked: function(shop) {
      shop.goods.forEach(function(good) {
       good.checked = shop.checked;
      });
     },
     setShopChecked: function(good, shop) {
      if (!good.checked) {
       shop.checked = false;
      } else {
       //          checked   false    
       shop.checked = !shop.goods.find(function(good) {
        return !good.checked;
       });
      }
     }
    }
    
    ショッピングカートを選択する時はsetAll Checkedを実行します。この時はすべての商品と店舗を選択します。
    セレクトショップでsetGood Checkedを実行する場合は、その店舗の下にあるすべての商品を選択します。
    商品を選ぶ時にset Shop Checkedを実行します。
        商品checkedがfalseの場合、現在の店舗の選択をキャンセルします。
        商品checkedがtrueである場合、現在の店舗はすべての商品を選択しているかどうかを判断し、現在の店舗を選択します。そうでなければ、現在の店舗の選択をキャンセルします。
    二、商品の削除
    
    <input type="button" value="  " @click="deleteGood(shop,goodI,list,shopI)">
    
    
    methods: {
     deleteGood: function(shop,goodI,list,shopI) {
      shop.goods.splice(goodI, 1);
      if (shop.goods.length==0) {
       list.splice(shopI, 1);
      }
     }
    }
    
    すべてのコード
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>     </title>
    <script src="vue.min.js"></script>
    </head>
    <body class="app">
    <input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
    <div v-for="(shopI, shop) in list">
    <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
    <div v-for="(goodI, good) in shop.goods">
    <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
    <span v-html="good.name"></span>
    <span v-html="good.age"></span>
    <input type="button" value="  " @click="deleteGood(shop,goodI,list,shopI)">
    </div>
    </div>
    </body>
    <script>
    var _list = [{
    checked: false,
    goods: [{
    name: "  1",
    money: 23,
    checked: false
    }]
    }, {
    checked: false,
    goods: [{
    name: "  2",
    money: 20,
    checked: false
    }, {
    name: "  3",
    money: 30,
    checked: false
    }]
    }];
    var vue = new Vue({
    el: '.app',
    data: {
    list: _list
    },
    computed: {
    checkedAll: function() {
    return this.checkedShopsCount == this.list.length;
    },
    checkedShopsCount: function() {
    var i = 0;
    this.list.forEach(function(item) {
    if (item.checked == true) i++;
    });
    return i;
    }
    },
    methods: {
    setGoodChecked: function(shop) {
    shop.goods.forEach(function(good) {
    good.checked = shop.checked;
    });
    },
    setShopChecked: function(good, shop) {
    if (!good.checked) {
    shop.checked = false;
    } else {
    shop.checked = !shop.goods.find(function(good) {
    return !good.checked;
    });
    }
    },
    setAllChecked: function(e) {
    this.list.forEach(function(shop) {
    shop.checked = e.target.checked;
    shop.goods.forEach(function(good) {
    good.checked = e.target.checked;
    });
    });
    },
    deleteGood: function(shop, goodI, list, shopI) {
    shop.goods.splice(goodI, 1);
    if (shop.goods.length == 0) {
    list.splice(shopI, 1);
    }
    }
    }
    });
    </script>
    </html>
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。