极客观点
项目管理
HarmonyOS
在做一个Vue的全选小练习，实现全选全不选，目前最终效果是做出来了，但是当我点击全选/全不选按钮时，控制台会报错。。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link rel="stylesheet" href="v-for.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="lists.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
<th>
<input type="checkbox" v-model="allChecked" @click="selectAll">
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in lists">
<td>{{ index + 1}}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<!-- 数量为0的时候无法减少 -->
<button
:disabled="0 == item.count"
@click="handleDel(index)">-</button>
<!-- 控制每个人最多买10件 -->
{{ item.count }}
<button
:disabled="10 == item.count"
@click="handleAdd(index)">+</button>
</td>
<td>
<button @click="clearItem(index)">移除</button>
</td>
<td>
<input type="checkbox" v-model="item.flag" @click="item.flag = !item.flag">
</td>
</tr>
</tbody>
</table>
<span>商品总价：💴{{ totalPrice }}</span>
</template>
<div v-else>没有商品。。。</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="v-for.js"></script>
</body>
</html>
js:
var app = new Vue({
el: '#app',
data: {
allCheck: true,
lists: [
{
id: 1,
name: 'iPhone 7',
price: 6188,
count: 1,
flag: true,
},
{
id: 2,
name: 'iPad Pro',
price: 5888,
count: 1,
flag: true,
},
{
id: 3,
name: 'MacBook Pro',
price: 21488,
count: 1,
flag: true,
},
],
},
computed: {
totalPrice: function() {
let total = 0;
for ( let i = 0; i < this.lists.length; ++i ) {
total += this.lists[i].count * this.lists[i].price;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
},
allChecked: function() {
for ( let i = 0; i < this.lists.length; ++i ) {
if ( !this.lists[i].flag ) return allCheck = false;
}
return allCheck = true;
}
},
methods: {
handleDel: function(index) {
if ( 0 == this.lists[index].count ) return;
--this.lists[index].count;
},
handleAdd: function(index) {
if ( 10 == this.lists[index].count ) return;
++this.lists[index].count;
},
clearItem: function(index) {
return this.lists.splice(index, 1);
},
selectAll: function() {
this.allCheck = !this.allCheck;
for ( let i = 0; i < this.lists.length; ++i ) {
this.lists[i].flag = this.allCheck;
}
}
}
});