VueJS复选框从数据属性值中获取总和和计数答案

【问题标题】：VueJS checkbox get Sum and count from data attribute valueVueJS复选框从数据属性值中获取总和和计数
【发布时间】：2021-05-04 19:58:58
【问题描述】：

 <tr v-for='(women, index) in womenServices' :key="index">
                        <td class="text-center" style="width: 30px;">
                            <div class="custom-control custom-checkbox d-inline-block">
                                <input type="checkbox" class="custom-control-input"
                                       :id="'chk_wm' + index"
                                       :name="'chk_wm' + index"
                                       :data-price="women.price"
                                       :value="women.id" v-model="womenPackageServices">
                                <label class="custom-control-label" :for="'chk_wm' + index"></label>
                            </div>
                        </td>
                        <td>
                            !{women.title}!
                        </td>
                        <td>
                            !{women.price}!
                        </td>
                    </tr>
<input type="text" class="form-control" :v-model="packageServicesSum" placeholder="Total Price" readonly>

const app = new Vue({
            el: '#addVueServices',
            delimiters: ['!{', '}!'],
            data: {
                womenPackageServices: [],
                packageServicesSum: 0,
            },
            methods: {
                 
            }
            computed: {
                
            },
        })

v-model 工作正常，获取 id 并更新 womenPackagesServices 对象

但问题是

我想获取数据属性值以显示所选服务的价格和数量的总和。

如果有另一种简单的方法来求和价格，请帮帮我，我也想保留 womenPackageServices，因为这个数组将被传递到数据库以存储选定的复选框 ID。

我没有使用任何组件等，也不想使用。

【问题讨论】：

我已经使用 jquery ``` chkService: function (e) { const vue_ = this; vue_.selectedServicesSum = 0; $(".packageServiceChk:checked").each(function () { var i = $(this).data('price') vue_.selectedServicesSum += i; }); } ``` 因为我在这里没有得到观众的任何回应，但如果有人能解开这个谜团，我仍然期待。
您的代码不完整，您正在迭代的womenServices 是什么？尝试创建一个更短更简洁的示例代码来显示您的问题是什么

标签： javascript laravel vue.js vuejs2

【解决方案1】：

这是我在方法中使用 jquery 解决此问题的方法，因为我没有使用 VUEJS 独立或基于组件，因此很难完全使用 VUEJS 完成我的方法。

所以完成它的最短方法是这样。

               chkService: function (e) {
                    const vue_ = this;
                    vue_.packages.selectedServicesSum = 0;
                    $(".packageServiceChk:checked").each(function () {
                        var i = $(this).data('price')
                        vue_.packages.selectedServicesSum += i;
                    });
                },

【讨论】：