how to calculate the price of the selected item through 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.mountPP
this.calcTotalMoney()
},
calcTotalMoney () {
let totalMoney = 0
this.checkList.forEach((item) => {
totalMoney += item.num *item.book_price
})
this.total = totalMoney
}
}
}
< / script >
what"s going on now that checkList can only get the id of the selected item?
