<template>
<div>
<ul>
<li class="bookItem" v-for="item in bookList" :key="item.id" style="text-align: left;">
<el-checkbox v-model="item.checked" @change="handleChecked(item)">
<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 @click.stop="func">
<el-input-number v-model="item.num" size="small" @change="handleChange" :min="1"></el-input-number>
</div>
</div>
</el-checkbox>
</li>
</ul>
</keep-alive>
<div class="cart">
<span>共</span>
<span class="highLight">{{mount}}</span>
<span>本</span>
<el-button type="primary" @click.native="onOrder" :disabled="disable"><router-link :to="{name:'Money',params:{data:this.sel}}">提交订单</router-link></el-button>
<!-- <el-button type="primary" @click.stop="onOrder"><router-link to="/book/bookMoney">提交订单</router-link></el-button> -->
</div>
</div>
</template>
<script>
export default {
data () {
return {
checkAll: false,
isIndeterminate: true,
breadCrumbList: [],
bookList: [],
radio: '0',
checkList: [],
num: 1,
mount: 0,
total: 0,
sel: [],
clickFlag: false,
disable: true
}
},
mounted () {
window.localStorage.checkList = '[object Object]'
this.bookList = [{
id: '0',
book_url: require('../assets/images/book1.jpg'),
book_title: '古埃及死者之书',
book_price: '39',
num: 0,
checked: false
},{
id: '1',
book_url: require('../assets/images/book2.jpg'),
book_title: '当你开始爱自己',
book_price: '45',
num: 0,
checked: false
},{
id: '2',
book_url: require('../assets/images/book3.jpg'),
book_title: '格雷巴旅馆',
book_price: '59',
num: 0,
checked: false
}]
},
methods: {
func () {
},
handleChecked (val) {
//保存选中的checkbox的id
console.log(typeof this.checkList) //为什么打印出来是object?
if (this.checkList.indexOf(val.id) == -1)
this.checkList.push(val.id)
//设置提交订单按钮的禁用与否
if (this.checkList.length > 0)
this.disable = false
//勾选checkbox所需要做的事情
if (val.checked === true) {
console.log(66)
this.mount += Number(val.num)
} else {
console.log(this.checkList)
console.log(typeof this.checkList)
// this.checkList.remove(val.id)
this.mount -= Number(val.num)
}
//将所选checkbox的id保存到localStorage
window.localStorage.setItem('checkList',JSON.stringify(this.checkList))
},
</script>
数组使用
typeof
打出来就是object
的,你要查看对象是否为数组,可以使用Array.isArray