如何实现选中商品的复选框后才计算支付金额到总和中？

Question

<template>
  <div class="mui-content">
    <div class="mui-card" v-for="item in list" :key="item.id">
      <div class="mui-card-content">
        <form action="">
          <input type="checkbox" class="fuxuan" checked="checked" name="check">
          <div>
            <img :src="item.url">
            <p class="name">{{item.name|f1}}</p>
            <div class="shuliang">
              <p class="price">￥{{item.price}}</p>
              <div style="display: inline;float: right;">
                <input type="button" class="jian "  value="-" :class="{hide:item.isHide}" @click="(item.num<2 ? item.num=0 : item.num--)">
                <input contenteditable='true' :value="item.num" :class="{yuan:item.isYuan}" class="num" @click="item.isHide=!item.isHide,item.isYuan=!item.isYuan">
                <input type="button" class="jia " :class="{hide:item.isHide}" value="+" @click="item.num++">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="jie">
      <p class="zongjia">
        <span>合计 :</span>
        <span style="color: red" v-text="sum">&nbsp;</span>
      </p>
      <button class="jiesuan">结算</button>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";

  Vue.filter('f1', function (value) {
    if (value.length > 8) {
      value = value.substring(0, 8) + '...';
    }
    return value;
  })
  export default {
    name: "CarAll",
    data() {
      return {
        list: [
          {
            'id': 1,
            'price': 130,
            'name': '新西兰宠物零食真致鲜牛乳幼犬营养狗狗猫咪喝的发育牛奶6瓶',
            'url': '//g-search1.alicdn.com/img/bao/uploaded/i4/i2/2200724926519/O1CN01dHp1UZ1y1kbMynCsw_!!0-item_pic.jpg_250x250.jpg_.webp',
            'num': 1,
            'isHide': true,
            'isYuan': true,
          },
          {
            'id': 2,
            'price': 36,
            'name': '猫咪沐浴露猫沐浴露猫咪专用猫洗澡专用香波',
            'url': '//g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i1/53863367/O1CN01OZijm11ak8Bk7cUWU_!!0-saturn_solar.jpg_180x180.jpg_.webp',
            'num': 3,
            'isHide': true,
            'isYuan': true,
          },
        ],
      }
    },
    computed: {
      sum: {
        get:function(){
          let sum=0;
          for(let i = 0;i<this.list.length;i++) {
				  sum+= this.list[i].price*this.list[i].num;
          }
          return sum;
        }
      }
    }
  }
</script>

<style scoped>
  img {
    width: 100px;
    height: 100px;
    float: left;
    border-radius: 10px;
    margin-left: 30px;
  }

  .mui-card {
    border-radius: 10px;
    padding: 5%;
  }
  .hide{
    display: none;
  }
  .name {
    display: inline-block;
    font-size: large;
    margin-left: 3%;
    margin-top: 8px;
  }

  .shuliang {
    margin-left: 3%;
    margin-top: 32px;
    border-right: none;
    border-left: none;
  }
  .fuxuan{
    float: left;
    margin-top: 37px;
    border: 1px solid black;
    border-radius: 10px;
    background: #FACC31 !important;
    height: 1px;
    width: 1px;
  }
  .price {
    color: red;
    font-size: larger;
    display: inline;
    margin-left: 5%;
  }
  .yuan{
    border-radius: 5px;
  }
  .num {
    width: 25px;
    margin-left: -5%;
  }

  .jian {
    width: 20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .jia {
    margin-left: -5%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 20px;
  }

  input{
    text-align: center;
    margin: 0;
    padding: 0;
    border: 1px solid #aaaaaa;
    font-size: 16px;
    line-height: 17px;
    border-radius: 0;
    width: 26px;
    height: 23px;
  }
  input[type=checkbox]{
    cursor: pointer;
    position: relative;
  }

  input[type=checkbox]::after{
    position: absolute;
    top: -2px;
    left: -2px;
    background: white;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid #bbbbbb;
    visibility: visible;
    text-align: center;
    content: ' ';
    border-radius: 100%
  }

  input[type=checkbox]:checked::after{
    background:#F8D674;
    content: "✓";
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: bolder;
    line-height: 19px;
  }
  .jie{
    position: fixed;
    bottom: 52px;
    width: 100%;
    background: white;
    z-index: 10;
  }
  .zongjia{
     display: inline-block;
    font-size:15px;
    margin-left: 200px;
    margin-top: 14px;
   }
  .jiesuan{
    float: right;
    background: #F8D674;
    margin: 5px;
    border-radius: 10px;
    font-size: 18px;
    width: 70px;
    color: white;
  }

</style>

问题：如何实现选中商品的复选框后才计算支付金额到总和中？

困难：现在是无论是否勾选复选框，商品金额都会被计算。

尝试：想在sum函数中加一条if语句判断复选框是否被选中，但由于计算金额和数量利用的是list循环，不知道如何选中某商品对应的复选框进行判断

 

Answer 1

给你的数据中加个属性checked。当选中就为true,反之为false。计算时先判断item.checked==true才接着往下执行