質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    699questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

vue.jsでtodoリスト

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 298

FightMoney

score 1

 todoの一括削除ボタンを設置

vue.jsを使用してHTMLとjsでTodoリストを作成しています。

        <ul class="todoList">
            <li v-for="(todoItem , index) in list">
                <label>
                    <input class="todoChick" type="checkbox" v-model="todoItem.done"/>
                    <span>{{ todoItem.text }}</span>
                </label>
            </li>
        </ul>

        <input v-model="text" type="text" name="" value="" placeholder="入力してください">
        <input v-on:click="addTodo()" type="button" value="追加する">
        <div class="hoge">hoge</div>
        <div>
            <select id="removeStatus" v-model="chick">
                <option>チェックあり</option>
                <option>チェックなし</option>
            </select>
            <input v-on:click="removeTodo()" type="button" value="削除する">
        </div>
new Vue({
    el: '#app',
    data:{
        text: '',
        list: [
            {text: 'arr0', done: true , index: 0} ,
            {text: 'arr1', done: false , index: 1} ,
            {text: 'arr2', done: true , index: 2} ,
            {text: 'arr3', done: false , index: 3}
        ],
        chick: 'チェックあり'
    },
    methods: {
        addTodo: function() {
            var newTodo = this.text;
            var num = this.list.length;

            if(newTodo){
                this.list.push(
                    {text: newTodo, done: false , index: num}
                );
                this.text= '';
            }else{
                alert('入力してください');
            }
        },
        removeTodo: function() {
            var targetList = this.list;
            var selectChickFlg = this.chick;
            var removeTargetList = new Array();
            targetList.filter(function(i) {
                var chickFlg = i.done;
                var num = i.index;

                if(selectChickFlg === 'チェックあり' && i.done === true){
                    removeTargetList.push(num);
                }else if(selectChickFlg === 'チェックなし' && i.done === false){
                    removeTargetList.push(num);
                }

                if(removeTargetList.length > 0 && targetList.length === num + 1){
                    for(var y = 0; y < removeTargetList.length; y++){

                        targetList.splice(removeTargetList[y] , 1);
                    }
                }
            });
        }
    }
})

selectで選択した状態を一括で削除するボタンを設置したいのですが、下記のコード

targetList.splice(removeTargetList[y] , 1);


ではindex番号の取り方がうまくいかず動作しません。
vueで実装するにはどのような記述をすればいいでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

selectで選択した状態を一括で削除するボタンを設置したい

やりたいのはこういうこと?

removeTodo: function() {
    var targetList = this.list;
    var selectChickFlg = this.chick;
    this.list = targetList.filter(function(i) {
        var chickFlg = i.done;
        var num = i.index;

        if (selectChickFlg === 'チェックあり') {
            return i.done === false;
        } else if(selectChickFlg === 'チェックなし') {
            return i.done === true;  
        }
    });
}


https://jsfiddle.net/c73nwrrv/1/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/28 15:28

    ありがとうございます!
    勉強になりました

    キャンセル

  • 2018/05/28 15:36

    ちなみに
    var targetList = this.list;
    this.list = targetList.filter(function(i) {



    var targetList = this.list;
    targetList = targetList.filter(function(i) {
    にすると動かないのはなぜですか?

    キャンセル

  • 2018/05/28 19:28

    まずはご自身で調べてみて、どうしてもわからなかったら別途質問を立ててください。
    Javascriptにおける参照渡し、値渡しについて調べられると良いでしょう。
    本質問とは違う内容なので、ここでは回答を控えさせていただきます。

    キャンセル

0

targetList.filterって合ってるんですか?forEachではなく?
removeTargetListに新しい配列を作る必要もよくわかりませんね…
一つずつtargetListを回して都度targetList.splice(i,1)すればいいと思うんですが

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/28 15:28

    vueのfilterを使ってなんとかしようと苦肉の策でremoveTargetListを作成しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    699questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。