计算商品总价？

Question

如何通过checkbox计算选中商品得价格？

<template>
  <div>
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <ul>
        <li class="bookItem" v-for="item in bookList" :key="item.id" style="text-align: left;">
            <el-checkbox-group v-model="checkList" @change="handleCheckedBooks">
                <el-checkbox :label="item.id">
                    <img class="bookImg" :src='item.book_url' style="width: 100px; height: 100px;">
                    <h3>{{item.book_title}}</h3>
                    <span class="price">￥{{item.book_price}}</span>
                    <div>
                      <el-input-number v-model="item.num" size="small" @change="handleChange" :min="1"></el-input-number>  
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </li>
    </ul>
    <div class="cart">
        <span>共</span>
        <span class="highLight">{{mount}}</span>
        <span>本</span>
        <span>合计</span>
        <span class="highLight">￥{{total}}</span>
        <el-button type="primary" @click.stop="onOrder">提交订单</el-button>
    </div>
  </div>
</template>
<script>
import BreadCrumb from '@/components/common/BreadCrumb'
export default {
  components: {
    BreadCrumb
  },
  data () {
      return {
          breadCrumbList: [],
          bookList: [],
          radio: '0',
          checkList: [],
          num: 1,
          mount: 0,
          total: 0
      }
  },
  mounted () {
    this.breadCrumbList = [
        {title: '首页'},
        {title: '图书管理'},
        {title: '图书借阅'}
    ],
    this.bookList = [{
        id: '0',
        book_url: require('../assets/images/book1.jpg'),
        book_title: '古埃及死者之书',
        book_price: '39',
        num: 0
        },{
        id: '1',
        book_url: require('../assets/images/book2.jpg'),
        book_title: '当你开始爱自己',
        book_price: '45',
        num: 0
        },{
        id: '2',
        book_url: require('../assets/images/book3.jpg'),
        book_title: '格雷巴旅馆',
        book_price: '59',
        num: 0
        },{
        id: '3',
        book_url: require('../assets/images/book4.jpg'),
        book_title: '亲密关系',
        book_price: '30',
        num: 0
        },{
        id: '4',
        book_url: require('../assets/images/book5.jpg'),
        book_title: '治愈的力量',
        book_price: '25',
        num: '0'
        },{
        id: '5',
        book_url: require('../assets/images/book6.jpg'),
        book_title: '公主走进黑森林',
        book_price: '69',
        num: 0
        }
    ]
  },
  methods: {
      onOrder () {
          
      },
      handleCheckedBooks () {
           console.log(this.checkList)
      },
      handleChange (val) {
        this.mount++
        this.calcTotalMoney()
      },
      calcTotalMoney () {
          let totalMoney = 0
          this.checkList.forEach((item) => {
              totalMoney += item.num *item.book_price
          })
          this.total = totalMoney
      }
  }

}
</script>
现在checkList只能获取到选中项得id是怎么回事？

Answer 1

你的label綁定的id，那出现在checkList的也就是id；
要通过checkList中的id找到bookList中的项，接下来就纯属加减乘除计算了。

Answer 2

用计算属性，具体代码，你再调试吧

computed:{
    totalMoney(){
        let a=0;
        this.bookList.forEach(v=>{
            a+=v.book_price*v.num
        })
        return a;
    }
}