vue中计算属性实现全选和全不选----computed的get\set用法 

 1 <ul class="cart-list" v-for="sku in skuInfo" :key="sku.id">
 2     <li class="cart-list-con1">
 3             <input
 4               type="checkbox"
 5               name="chk_list"
 6               :checked="sku.todo"
 7               @click="isCheckbox(sku)"
 8             />
 9       </li>
10 </ul>
11 
12 <div class="select-all">
13         <input class="chooseAll" type="checkbox" v-model="Check" />
14         <span>全选</span>
15       </div>
16 
17 
18 <script>
19     export default {
20   data() {
21     return {
22       skuInfo: [],
23       isCheck: false,
24     };
25   },
26   computed: {
27     Check: {
28       get() {
29         // console.log("get")
30         return this.isCheck;
31       },
32       set() {
33         // console.log("set")
34         this.isCheck = !this.isCheck;
35         this.skuInfo.forEach((sku) => {
36           if (this.isCheck) {
37             sku.todo = true;39           } else {
40             sku.todo = false;42           }
43         });
44       },
45     },
46   },
47   mounted() {
48     this.getShopCart();
49   },
50   methods: {
51     getShopCart() {
52       reqCartList()
53         .then((res) => {
54           if (res.code == "200") {
55             this.skuInfo = res.data
56           } else {
57             alert(res.message);
58           }
59         })
60         .catch((err) => {
61           console.log("系统繁忙！请重试");
62         });
63     },
64     isCheckbox(sku) {
65       if (!sku.hasOwnProperty("todo")) {
66         sku.todo = true;
67       } else {
68         sku.todo == true ? (sku.todo = false) : (sku.todo = true);
69       }
70       if (sku.todo) {
71         let index = this.skuInfo.filter((res) => res.todo == true);
72         if (index.length == this.skuInfo.length) {
73           this.isCheck = true;
74         }
75       } else {
76         this.isCheck = false;
77       }
78     },
79    
80   },
81 };
82 </script>

 

posted @ 2022-01-05 14:24  阿piu～ต  阅读(210)  评论(0)    收藏  举报