vue.jsでtodoリスト

Question

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で実装するにはどのような記述をすればいいでしょうか？

Answer 1

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/

Comments

[FightMoney]

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

[FightMoney]

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

を

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

[xenbeat]

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

Answer 2

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

Comments

[FightMoney]

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