亚洲国产精品成人一区二区在线 ,一个人在线观看视频的免费

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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

我想大聲告訴你 2017-05-19 10:35:09

1191

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

我想大聲告訴你

reply all(3)

伊謝爾倫2017-05-19 10:37:09 3 floor

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>

Like +0

Add Reply

我想大聲告訴你2017-05-19 10:37:09 2 floor

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}

Like +0

Add Reply

黃舟2017-05-19 10:37:09 1 floor

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

Like +0

Add Reply