javascript - Demandez : Comment supprimer les éléments de tableau sélectionnés dans Vue (lorsqu'il y a plusieurs sélections) ?
我想大声告诉你
我想大声告诉你 2017-05-19 10:35:09
0
3
1087

Les données sont simulées. Lorsque je clique sur Modifier, je souhaite supprimer les éléments sélectionnés. Autrement dit, si un est sélectionné, un sera supprimé. Si plusieurs éléments sont sélectionnés, plusieurs éléments seront supprimés. le tableau sera supprimé. Les éléments ont un attribut
par défautchecked.

Adresse démo

structure 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>
code js

    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 --;
                }
            }
        }
    });
我想大声告诉你
我想大声告诉你

répondre à tous(3)
伊谢尔伦

Lors de la suppression d'éléments de tableau par lots dans JS, vous devez les supprimer dans l'ordre inverse (c'est-à-dire supprimer d'abord les éléments avec un grand index, puis supprimer les éléments avec un petit index),
Parce que l'index du Le tableau changera pendant le processus de suppression, si vous supprimez d'abord les petits éléments, l'index des éléments suivants changera
J'ai écrit une démo simple :

.
<!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>
我想大声告诉你

Changez votre façon de penser, ne supprimez pas, le filtrage est plus simple et plus 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}
黄舟

Déjà résolu !
Adresse de référence
Utiliser la boucle inversée


            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);
                     }
                 }
            }
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal