jsの配列内にある要素の削除について

Question

vue.jsで実行しています。
trueのリストを全て削除したいです。

    <div id="app">
        <ul>
            <li v-for="list in lists">
                    <input type="checkbox" name="" v-model="list.flag">
            </li>
        </ul>
        <form action="">
            <input type="button" value="削除" v-on:click="removelist()">
        </form>
    </div>

    new Vue({
        el: '#app',
        data: {
            lists: [
                { title: '要素1', flag: true },
                { title: '要素2', flag: true },
                { title: '要素3', flag: false },
                { title: '要素4', flag: false },
                { title: '要素5', flag: false },
            ]
        },
        methods:{
            removelist: function(){
                var _self = this;
                var index = 0;
                this.lists.forEach(function(list){
                    if(list.flag === true){
                        _self.lists.splice(index,1);
                    }
                    index++;
                });
            }
        },
    })

上記のコードで削除を続行した時に以下の挙動になります。

[実行前]
要素1 - true
要素2 - true
要素3 - false
要素4 - false
要素5 - false

[実行後]
要素2 - true
要素3 - false
要素4 - false
要素5 - false

Trueを一つ空けると望んだ形になります。
[実行前]
要素1 - true
要素2 - false
要素3 - true
要素4 - false
要素5 - false

[実行後]
要素2 - false
要素4 - false
要素5 - false

なぜ連続してtrueがあるとうまく動作しないのでしょうか？

Answer 1

filterを使えばすぐにできると思います。

removelist() {
  this.lists = this.lists.filter(elem => elem.flag == false);
}

個人的には lists (リストの複数形)という変数名が気になりました。

Answer 2

問題はtureの数ではないと思います。

配列の中身をみてみると、
要素1 - true
要素2 - true
要素3 - false
要素4 - false
要素5 - false
となっていて、index=0の要素を削除します。
すると、
要素1 - true
要素2 - false
要素3 - false
要素4 - false
となります。
で、index++しているので、index=1の要素をチェックします。
要素2 - false　
なので、要素1は残ったままになります。

yambejpさんが指摘されているように、要素の最後から削っていくのが良いと思います。

Answer 3

削除していく途中でindexが変わってしまうので思い通りに動いていないのだと思います！
皆さんおっしゃっているようにお尻から削除していけばindexが変わらないのでスムーズです！

matherさんのが一番シンプルですね!
削除用リスト作る方法で実装してみたので参考までに載せときます・・・(´・ω・`)

（削除対象を画面に出したりするならこっちのがいいかも？）

この実装方法では、削除用リストにunshiftで追加することで「お尻から消す」ことを実現しています。

    new Vue({
        el: '#app',
        data: {
            lists: [
                { title: '要素1', flag: true },
                { title: '要素2', flag: true },
                { title: '要素3', flag: false },
                { title: '要素4', flag: false },
                { title: '要素5', flag: false },
            ]
        },
        methods:{
            removelist: function(){
                var _self = this;
                var index = 0;
                var deleteList = new Array();
                this.lists.forEach(function(list){
                    if(list.flag === true){
                    		deleteList.unshift(index);
                    }
                    index++;
                });
                deleteList.forEach(function(index){
                	_self.lists.splice(index,1);
                });
            }
        },
    })

Answer 4

配列なのでfilterでいけそうな気がしますが、
要素の削除をスル場合はインデックスはうしろから回さないとだめかもしれません