How to calculate the order quantity? Change the order quantity according to whether checkbox is selected or not?

<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
how to change the number of order books in the lower right corner based on whether checkbox is selected or not?
how do I prevent changing the selected state of checkbox when I click el-input-number?

Oct.09,2021

it would be better to have an online code example, but it would be difficult to answer by relying on this alone, or it would be nice to provide a simple runnable example

for this problem, only one idea can be provided. The final result can be calculated by using filter plus reduce , such as let result = aaa.filter (bb). Reduce (c) form

.

write @ click.stop where you need to stop it to stop bubbling:

<div @click="checked">
    <div @click.stop>
        <input type="number" @change="number">//checked
    </div>
</div>

check statistics:
1. Set the selected status attribute for the data source, change the selected status of the current item when checked / unchecked, use filter Filter in the selected event of item to count the total number of items, in the data source whose selected is true, that is, the total number of items, selected
2, the data source structure remains unchanged, create a separate array, which is used to store only id or other attributes of the selected_items, and count the array length, in the selected event of item. That is, the total number of selected

disable / enable checkbox:
set the checkbox enabled status property for the data source. When the purchase quantity +-button or manually enter the quantity is triggered, the checkbox enabled status of the current item is updated to false, that is, when the purchase quantity is modified, it is not allowed to change the selected state of the checkbox (checkbox disabled).

I don't quite understand the purpose of disabling checkbox. There is no dependence between the selected status and the purchase quantity. You can also fill in the purchase quantity if you leave it unchecked, and you can also uncheck the purchase quantity when filling in the purchase quantity. The final statistical result of the total quantity of all goods should be based on the real-time status, that is, statistics of the goods currently checked and the corresponding purchase quantity

Menu