技术笔记
Vue checkbox事件,方法中如何获取选中值?
 moons   2020-08-08 09:56:13   117
专栏分类: javascript
    <body>
    <style>
        li{list-style-type: none;float: left;padding: 5px 15px}
    </style>
    <form action="" id="app" method="POST">
        <li v-for="(item,key) in minfo">
            <input
                    type="checkbox"
                    v-bind:name="item.name"
                    v-bind:value="item.price"
                    v-model="allPrice"
                    @click="sumAllPrice">
            {{item.title}}
        </li>
        {{allPrice}}
        <a href="#">计算</a>
        <button type="submit">提交</button>
    </form>
    <script>
        jQuery(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    minfo:[
                        {name:'c1',title:'通屏轮播',price:'1500'},
                        {name:'c2',title:'通屏轮播',price:'500'},
                        {name:'c3',title:'搜索代码',price:'400'},
                        {name:'c4',title:'华为手机',price:'3400'},
                    ],
                    checked : false,
                    allPrice: [],
                    sumPrice:0
                },
                methods:{
                    sumAllPrice:function(e){
                        var that = this;
                        setTimeout(function () {
                            console.log(that.allPrice);
                        }, 0);
                        if (e.target.checked){
                            //console.log(e.target.name);
                            //console.log(e.target.value);
                        }
                    }
                }
            })
        });
    </script>
    </body>


####重点操作,因为初次传中是在models前操作的所以说会漏一个
    setTimeout(function () {
    console.log(that.allPrice);
    }, 0);
Copyright © mos360.cn By Moons Soft Studio 百度统计