javascript - Ask: How to delete selected array elements in Vue (when there are multiple selections)?

Question

The data is simulated. When clicking edit, I want to delete the selected elements. That is, if one is selected, one will be deleted. If multiple are selected, multiple will be deleted. In this way,
every time Elements in an array have a checked attribute by default

Demo address

html structure

    <p class="t-root" style="margin-bottom: 1.6rem;">
        <section class="shopping-cart-title" flex f-d="r" f-w="n" j-c="s-b" a-i="center">
            <p>全部商品</p>
            <p>
                <a href="javascript:;" @click="editorShopping">{{ showtext ? '编辑' : '完成' }}</a>
            </p>
        </section>

        <!-- 购物车商品列表 -->
        <section class="shopping-list">
         <template v-if="shoppingList.length > 0">
            <p v-for="(shopping,index) in shoppingList" class="item" flex f-d="r" f-w="n" j-c="s-b" a-i="center">
                <p class="shopping-checkbox">
                    <input :id="shopping.id" type="checkbox" name="" class="" v-model="shopping.checked">
                    <label :for="shopping.id"></label>
                </p>
                <p class="shopping-box" flex f-d="r" f-w="n" j-c="start" a-i="center">
                    <p><img :src="shopping.imgsrc" alt=""></p>
                    <p class="info">
                        <h3>{{ shopping.title }}</h3>
                        <p class="acount" flex f-d="r" f-w="n" j-c="s-b" a-i="center">
                            <span class="money">￥{{ shopping.money }}</span>
                            <p class="count" flex f-d="r" f-w="n" j-c="center" a-i="center">
                                <span class="shopping-num" v-show="showtext">x{{ shopping.shoppingnum }}</span>
                                <p flex f-d="r" f-w="n" j-c="center" a-i="center" v-show="!showtext">
                                    <span class="minus" :class="{active : shopping.shoppingnum > 1}" @click="reduce(index)">
                                    <i class="icon iconfont icon-t-icon8"></i>
                                    </span>
                                    <input type="text" readonly disabled class="showNumber" v-model="shopping.shoppingnum">
                                    <span class="add" :class="{active : shopping.shoppingnum < 100}" @click="add(index)">
                                    <i class="icon iconfont icon-t-icon7"></i>
                                    </span>
                                 </p>
                            </p>
                        </p>
                    </p>
                </p>
            </p>
         </template>

        </section>


        <section class="download-order-footer" flex f-d="r" f-w="n" j-c="s-b" a-i="center">
            <p class="shopping-checkall">
                <input id="checkall" type="checkbox" class="" name="">
                <label for="checkall">
                    <i>全选</i>
                </label>
            </p>
            <p class="left">
                总计：<b>￥684</b>
            </p>
            <p class="right">
                <a href="javascript:;" flex f-d="r" f-w="n" j-c="center" a-i="center" v-show="showtext">去付款</a>
                <a @click="removeShopping" href="javascript:;" flex f-d="r" f-w="n" j-c="center" a-i="center" v-show="!showtext">删除</a>
            </p>
        </section>

    </p>

js code

    var vm = new Vue({
        el : ".t-root",
        data : {
            showtext : true,
            shoppingList : [
                {
                    id : 11,
                    title : '贡牌茶叶西湖春茶正宗雨前龙井茶礼盒装礼盒装160g礼盒装',
                    money : 48,
                    imgsrc : 'images/download-order-img-11@2x.png',
                    shoppingnum : 1,
                    checked : true
                },
                {
                    id : 22,
                    title : '贡牌茶叶西湖春茶正宗雨前龙井茶礼盒装礼盒装160g礼盒装',
                    money : 98,
                    imgsrc : 'images/download-order-img-11@2x.png',
                    shoppingnum : 1,
                    checked : true
                },
                {
                    id : 33,
                    title : '贡牌茶叶西湖春茶正宗雨前龙井茶礼盒装礼盒装160g礼盒装',
                    money : 148,
                    imgsrc : 'images/download-order-img-11@2x.png',
                    shoppingnum : 1,
                    checked : true
                }
            ]
        },
        computed : {
        },
        methods : {
            editorShopping : function(){
               this.showtext = !this.showtext;
            },
            removeShopping : function(){
                var that = this;
                that.shoppingList.forEach(function(value,index){
                    //只有为true时才删除
                    if (value.checked) {
                        that.shoppingList.splice(index,1);
                       // console.log(index);
                    }
                });
            },
            add : function(index){
                var shopping = this.shoppingList[index];
                if (shopping.shoppingnum == 100) {
                    return false;
                }else {
                    shopping.shoppingnum ++;
                }
            },
            reduce : function(index){
                var shopping = this.shoppingList[index];
                if (shopping.shoppingnum == 1){
                    return false;
                }else {
                    shopping.shoppingnum --;
                }
            }
        }
    });

Answer 1

When deleting array elements in batches in JS, you should delete them in reverse order (meaning to delete elements with a large index first, and then delete elements with a small index),
Because the index of the array will change during the deletion process, if the small elements are deleted first , the index of subsequent elements will change.
I wrote a simple demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="app">
            <p>
                <button @click="removeAll">删除全部</button>
            </p>
            <ul v-for="value of arr">
                <li>
                    {{value}}
                </li>
            </ul>
        </p>
    </body>
    <script src="./vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                arr:['a','b','c']
            },
            methods:{
                removeAll:function() {
                    var length = this.arr.length;
                    for(let i =length ;i>=0 ;i--){
                        this.arr.splice(i,1);
                    }
                }
            }
        })
    </script>
</html>

Answer 2

Change your thinking, don’t delete, filtering is simpler and more intuitive.

// 直接过滤更简单，直观
var arr = [{a:1,c:true},{a:2,c:false},{a:3,c:true}]
arr = arr.filter(function(i){ return !i.c })
console.log(arr) // {a:2,c:false}

Answer 3

Already solved!
Reference address
Use reverse loop

            removeShopping : function(){
                 var that = this;
                 for (var i = that.shoppingList.length - 1;i >= 0;i--) {
                     var index = that.shoppingList[i];
                     if (index.checked) {
                         that.shoppingList.splice(i,1);
                     }
                 }
            }