1
我正在使用帶有複選框的Vuejs編寫過濾器應用程序。當我使用單個複選框時,它運行良好。但是,當我檢查超過2個複選框時,它將刪除結果。在計算過濾器中使用Vuejs時出現的問題
例如,當我檢查綠色和紅色,它應該顯示的標題1和標題2 或者當我檢查綠色,紅色,活動,已完成,它應該顯示的標題1和標題2
您可以查看我的代碼:https://jsfiddle.net/dalenguyen/xLcvdy0n/1/
HTML代碼:
<div class="content">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Filter by</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Health</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="green" value="Green" v-model="checkedHealths" name="Healths">
<label for="green">Green</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="red" value="Red" v-model="checkedHealths" name="Healths">
<label for="red">Red</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="yellow" value="Yellow" v-model="checkedHealths" name="Healths">
<label for="yellow">Yellow</label>
</div>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Status</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="active" value="Active" v-model="checkedStatuses" name="Statuses">
<label for="active">Active</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="completed" value="Completed" v-model="checkedStatuses" name="Statuses">
<label for="completed">Completed</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="cancelled" value="Cancelled" v-model="checkedStatuses" name="Statuses">
<label for="cancelled">Cancelled</label>
</div>
</div>
<!-- /.box-body -->
</div>
<button type="button" class="btn btn-block btn-info" v-on:click="resetFilter">Reset</button>
</div>
<!-- /.box-body -->
</div>
</div>
<div class="col-md-9 col-sm-8">
<div class="col-md-4" v-for="project in filteredProjects">
<div class="box collapsed-box">
<div class="box-header with-border">
<h4 class="box-title"><a href="">{{project['title']}}</a></h4>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
<table class="table table-striped">
<tr>
<td>Status</td>
<td>{{project['Status']}}</td>
</tr>
<tr>
<td>Health</td>
<td>{{project['Health']}}</td>
</tr>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
Vuejs代碼:
var app = new Vue({
el: '.content',
data: {
projects: [
{
"title": "Title 1",
"Status": "Active",
"Health": "Green",
},
{
"title": "Title 2",
"Status": "Completed",
"Health": "Red",
},
{
"title": "Title 3",
"Status": "Cancelled",
"Health": "Yellow",
},
]
,
checkedHealths: [],
checkedStatuses: []
},
computed: {
filteredProjects: function(){
let filterProjects = this.projects;
$.each(this.checkedHealths, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Health == key;
})
});
$.each(this.checkedStatuses, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Status.includes(key);
})
});
return filterProjects;
}
},
mounted: function(){
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
increaseArea: '20%' // optional
});
jQuery('input').on('ifChecked', function(e){
if($(this).attr('name') === "Healths")
app.$data.checkedHealths.push($(this).val());
if($(this).attr('name') === "Statuses")
app.$data.checkedStatuses.push($(this).val());
});
jQuery('input').on('ifUnchecked', function(e){
if($(this).attr('name') === "Healths"){
let data = app.$data.checkedHealths;
app.$data.checkedHealths.splice(data.indexOf($(this).val()),1);
}
if($(this).attr('name') === "Statuses"){
let data = app.$data.checkedStatuses;
app.$data.checkedStatuses.splice(data.indexOf($(this).val()),1);
}
});
},
methods: {
resetFilter: function(){
$('input').iCheck('uncheck');
}
}
})
謝謝@Bert Evans。你太棒了! –
這是因爲iCheck需要JQuery,所以我使用它。有什麼最佳做法可以推薦?謝謝, –
@DaleNguyen通常,使用jQuery插件,你想把它們包裝在一個Vue組件中。在這種情況下,您可能想要創建一個iCheck複選框組件,並且任何jQuery代碼只能在其中使用。這是一個封裝插件的Vue文檔的例子。 https://vuejs.org/v2/examples/select2.html – Bert