javascript - Tanya: Bagaimana untuk memadam elemen tatasusunan yang dipilih dalam Vue (apabila terdapat berbilang pilihan)?

Question

Data disimulasikan Apabila saya mengklik edit, saya ingin memadamkan elemen yang dipilih, iaitu jika satu dipilih, satu akan dipadamkan, berbilang elemen akan dipadamkan tatasusunan akan dipadamkan. Elemen mempunyai atribut
secara lalaichecked

Alamat demo

struktur html

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

    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

Apabila memadamkan elemen tatasusunan dalam kelompok dalam JS, anda harus memadamkannya dalam susunan terbalik (bermaksud memadamkan elemen dengan indeks yang besar dahulu, dan kemudian memadamkan elemen dengan indeks yang kecil),
Oleh kerana indeks tatasusunan akan berubah semasa pemadaman proses, jika elemen kecil dipadamkan dahulu, indeks elemen berikutnya akan berubah.
Saya menulis demo mudah:

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

Ubah pemikiran anda, jangan padam, penapisan adalah lebih mudah dan lebih intuitif.

// 直接过滤更简单，直观
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

Sudah diselesaikan!
Alamat rujukan
Gunakan gelung terbalik

            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);
                     }
                 }
            }