时间戳

首页 > 解决方案 > VueJS复选框从数据属性值中获取总和和计数

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

问题描述

 <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。

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

标签： javascriptlaravelvue.jsvuejs2

解决方案

这是我在方法中使用 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;
                    });
                },

推荐阅读