购物车的全选下面的商品不选中？

Question

如图：

当我点击全选的时候，总价计算出来了，但下面的商品为什么没有选中状态？
这是购物车代码：

<p class="main_box_title">购物车</p>
          <div class="cart">
            <input
              type="checkbox"
              class="cart_box"
              @click="selectedAll()"
              v-model="allChecked"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="cart_all">全选</span>
            <p class="cart_money">
              已选商品合计&nbsp;&nbsp;&nbsp;&nbsp;<span
                style="color: #ffa52b; font-weight: bold"
                >{{ orderMoney }}</span
              >&nbsp;&nbsp;&nbsp;&nbsp;元
            </p>
            <p class="cart_settlement" @click="settlement()">结算</p>
          </div>
          <div class="cart_main">
            <ul class="cart_main_title">
              <li>序号</li>
              <li>商品名称</li>
              <li>商品图片</li>
              <li>价格</li>
              <li>数量</li>
              <li>总价</li>
              <li>操作</li>
            </ul>
            <ul
              class="main_table"
              v-for="(item, index1) in cartInformation"
              :key="index1"
            >
              <li>
                <!-- 商品选中 -->
                <input
                  type="checkbox"
                  v-model="goodsInp"
                  :value="item.id"
                  name=""
                  :checked="item.checked"
                  @click="changCheck($event, index1, item.id, item, item.price)"
                  class="cart_box"
                />&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                {{ index1 + 1 }}
              </li>
              <li>
                {{ item.goodsName | aa }}
              </li>
              <li>
                
                <img :src="item.goodsPicture" alt="" />
              </li>
              <li>{{ item.price }}</li>
              <li>
                <span @click="addNum(item.id)">+</span>&nbsp;&nbsp;&nbsp;{{
                  item.num
                }}&nbsp;&nbsp;&nbsp;<span @click="reduceNum(item.id)">-</span>
              </li>
              <li>
                {{ item.total }}
              </li>
              <li>
                <p @click="deleteCart(item.id)">删除</p>
              </li>
            </ul>
</div>

这是全选的代码：

selectedAll() {
      this.allChecked = !this.allChecked;
      let cartInformation = this.cartInformation;
      if (cartInformation.length > 0) {
        cartInformation.forEach((v) => {
          if (this.allChecked == true) {
            v.checked = true;
          } else {
            v.checked = false;
          }
        });
      } else {
        return false;
      }
 },

是哪里写错了，请大佬帮忙看一看，谢谢！！

Answer 1

检测变化的注意事项

cartInformation.forEach((v, index) => {
          if (this.allChecked == true) {
            this.$set(this.cartInformation[index], 'checked', true)
            // v.checked = true;
          } else {
            this.$set(this.cartInformation[index], 'checked', false)
          }
        });

或者

selectedAll() {
      this.allChecked = !this.allChecked;
      let cartInformation = this.cartInformation;
      if (cartInformation.length > 0) {
        cartInformation.forEach((v) => {
          if (this.allChecked == true) {
            v.checked = true;
          } else {
            v.checked = false;
          }
        });
        this.cartInformation = cartInformation;
      } else {
        return false;
      }
 },

Answer 2

你的 checked 根本控制不了 input 的值，删除多余代码:

<input
    type="checkbox"
    v-model="item.checked"
    @click="changCheck($event, index1, item.id, item, item.price)"
    class="cart_box"
/>

---

checked 可能是第一次被设置所以需要用set设置

selectedAll() {
    this.allChecked = !this.allChecked;
    this.cartInformation &&
        this.cartInformation.forEach(v => {
          this.$set(v, "checked", this.allChecked);
        });
}

（ps：你这没用代码也太多了）

• else 里的 return 没必要
• checked 设置完全可以使用 this.allChecked 的值，没必要多加个条件判断
• this.cartInformation 如果是数组不需要判断长度，没有长度forEach就不会循环，相反应该先判断 this.cartInformation有没有值，因为如果this.cartInformation是undefined你的程序就报错了
• 使用v-model控制是否选中，你这里用了 v-model、:value、checked三个属性不同的变量都写在input上，完全没必要

Answer 3

element 也有全选的例子。
https://element.eleme.cn/#/zh...

https://codepen.io/1567887123...

Answer 4

array.forEach不属于vue监听变化array事件
可以在cartInformation.forEach后，添加一个this.$forceUpdate();方法

参考地址: https://cn.vuejs.org/v2/guide...