如何计算订单数量?根据checkbox的选中与否改变订单数量?

依依雨柔
  • 233
<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>
      

clipboard.png
如何根据checkbox的选中与否更改右下角的订单本数?
当点击el-input-number时如何阻止更改checkbox的选中状态?

回复
阅读 2.2k
3 个回答
要是能有一个在线的代码示例会好回答一些,光靠这个不好回答,或者能提供一个简单的可运行示例也不错

对于这个问题,仅能提供一个思路,利用filter加上reduce便能计算出最终结果,形如:let result = aaa.filter(bb).reduce(c)形式

在你需要阻止的地方写上@click.stop可以阻止冒泡:

<div @click="checked">
    <div @click.stop>
        <input type="number" @change="number">//这里面的时候不会触发外层的checked
    </div>
</div>

选中统计:
1、为数据源设置选中状态属性,选中/取消选中时改变当前item的selected状态,在item的选中事件里用filter过滤来统计数据源中selected为true的items,即被选中的总数
2、数据源结构不变,另行创建一个数组,用来存放selected_items,可以只存id或其他属性,在item的选中事件里统计数组length,即被选中的总数

禁用/启用checkbox:
为数据源设置checkbox启用状态属性,当触发购买数量 + - 按钮或手动输入数量时,更新当前item的checkbox启用状态为false,即当修改购买数量时不允许更改checkbox的选中状态(checkbox禁用)。

没太明白你禁用checkbox的目的是什么,商品的选中状态和修改购买数量并不存在依赖关系,未勾选商品也可以填写购买数量,填写购买数量时也可以不勾选商品。所有商品总数量的最终统计结果应该以实时状态为准,即统计当前被勾选的商品和对应的购买数量

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏