希望有人可以为我指明正确的方向-我对Vuejs还是很陌生，已经接管了别人的代码，尽管我已经做了很多工作，没有任何问题，但我仍在努力进行过滤工作。
以下是大部分代码：
<template>
<div v-if="showProperties">
<div v-if="properties.length > 0">
<div class="row">
<div class="col-2 listings--filter">
<select v-model="filter" class="form-control listings--filter_select">
<option value="" disabled hidden>Filter</option>
<option value="price-lowest">Lowest Price First</option>
<option value="price-highest">Highest Price First</option>
<option value="listing-new">Newest Listing First</option>
<option value="listing-old">Oldest Listing First</option>
</select>
</div>
<div class="col-2 listings--filtersstc">
<toggle-button v-model="sstcBtn"
:value="true"
:labels="{checked: 'Show SSTC', unchecked: 'Hide SSTC'}"
:width="120"
:height="40"/>
</div>
</div>
<div class="row margin-bottom">
<div class="col listings--filter">
<small v-show="showRemoveFilter">Current filter: {{ selectedFilter }}</small>
</div>
<div class="col listings--filter">
<small v-show="showRemoveFilter" v-on:click="removeSortProperties" class="float-right">Remove filter</small>
</div>
</div>
<div class="row">
<property-listings v-for="(property, index) in properties" v-bind:property="property" v-bind:key="index"></property-listings>
</div>
</div>
<div v-else>
<div class="row">
<div class="col text-center">
<p class="dark-text">No properties match your search criteria. Please try again.</p>
</div>
</div>
</div>
</div>
</template>
<script>
import PropertyListings from './PropertyListings.vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
Vue.use(VueGoogleMaps, {
load: {
key: '-------------------',
libraries: 'places', // This is required if you use the Autocomplete plugin
// OR: libraries: 'places,drawing'
// OR: libraries: 'places,drawing,visualization'
// (as you require)
}
})
export default {
data () {
return {
showProperties: false,
properties: [],
filter: '',
sstcBtn: true,
selectedFilter: '',
showRemoveFilter: false,
center: {lat: 00000, lng: -000000},
propertyInfoName: '',
propertyInfoPrice: '',
propertyInfoLink: '',
propertyInfoType: '',
infoWindowPos: {
lat: 0,
lng: 0
},
infoWinOpen: false,
currentMidx: null
}
},
delimiters: ['<%', '%>'],
components: {
PropertyListings
},
watch: {
filter: function(newFilter, oldFilter) {
this.sortProperties(newFilter);
},
sstcBtn: function(newSstcBtn, oldSstcBtn) {
this.removeSstcProperties(newSstcBtn);
}
},
methods: {
sortProperties: _.debounce(
function(newFilter) {
if(newFilter === 'price-highest') {
this.properties = _.orderBy(this.properties, 'price', 'desc')
this.selectedFilter = 'Highest Price First'
} else if(newFilter === 'price-lowest') {
this.properties = _.orderBy(this.properties, 'price', 'asc')
this.selectedFilter = 'Lowest Price First'
} else if(newFilter === 'listing-new') {
this.properties = _.orderBy(this.properties, 'id', 'desc')
this.selectedFilter = 'Newest Listing First'
} else if(newFilter === 'listing-old') {
this.properties = _.orderBy(this.properties, 'id', 'asc')
this.selectedFilter = 'Oldest Listing First'
}
this.showRemoveFilter = true
},
500
),
removeSstcProperties: _.debounce(
function(newSstcBtn) {
if(newSstcBtn == true){
console.log('do not filter')
//this.properties = _.filterBy(this.properties, 'status_id', '1')
return this.properties.filter(function(property){
return property.status_id == "1"
}.bind(this))
} else if(newSstcBtn == false){
console.log('do filter')
}
},
500
),
removeSortProperties: function() {
this.properties = _.orderBy(this.properties, 'id', 'desc')
this.showRemoveFilter = false
},
toggleInfoWindow: function(property, idx) {
this.infoWindowPos = {lat: Number(property.latitude), lng: Number(property.longitude)}
this.propertyInfoName = property.display_address
this.propertyInfoPrice = property.price
if(property.let_type_id === '3') {
this.propertyInfoLink = '/properties/for-students/' + property.main_searchable_areas + '/' + property.slug + '/' + property.property_ref
} else if(jQuery.inArray(property.let_type_id, ['1','2']) != '-1'){
this.propertyInfoLink = '/properties/for-rent/' + property.main_searchable_areas + '/' + property.slug + '/' + property.property_ref
} else {
this.propertyInfoLink = '/properties/for-sale/' + property.main_searchable_areas + '/' + property.slug + '/' + property.property_ref
}
}
},
created() {
var self = this;
axios.get('/properties/json')
.then(function (response) {
self.properties = response.data
self.showProperties = true
})
.catch(function (error) {
console.log(error);
});
}
}
</script>
其他所有工作都很好，但是我一直在努力的是removeSstcProperties方法，我已经触发了该方法，但是我很难为status_id = 1的属性实际过滤结果。我尝试了2种方法（其中一种已注释掉）。谁能指出我正确的方向？