Database'den fetch ettigim dataya filter islemi uygulamak istiyorum,
Vue'nin sikinti cekmekteyim. Datayi iki tarz filtereleme islemine tabi tutmaya calisiyom(check box ve range slider)
Bu ku konuda bilgisi olup, yol gosterebilecek birisi varsa sevinirim.
<script>
import vueSlider from 'vue-slider-component/src/vue-slider.vue';
export default {
data() {
return {
width: { value: [0, 190],
options: {
data: null, eventType: 'auto', width: 'auto',
height: 6, dotSize: 16, min: 0, max: 200 }
},
prices: { value: [0, 9500],
options: {
data: null, eventType: 'auto', width: 'auto',
height: 6, dotSize: 16, min: 0, max: 10000 }
},
regions: [],
rooms: [],
checkedRegions: [],
checkedRooms: [],
estates: null,
}
},
created(){
axios.get('/ajax').then((response) => {
this.estates = response.data
})
}
methods() {
fetchData: function () {
return this.estates
},
}
}
</script>
Template
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h3>Price Slider</h3>
<ul>
<li>
<vue-slider
ref="slider"
v-model="value"
v-bind="options"
>
</vue-slider>
</li>
</ul>
<h3>Width Slider</h3>
<ul>
<li>
<vue-slider
ref="slider"
v-model="value"
v-bind="options"
>
</vue-slider>
</li>
</ul>
<h3>Regions</h3>
<ul>
<li>
<input type="checkbox" v-model="checkedRegions" v-bind:value="regions.id">関東 <input/>
<input type="checkbox" v-model="checkedRegions" v-bind:value="regions.id">関西 <input/>
<input type="checkbox" v-model="checkedRegions" v-bind:value="regions.id">北海道<input/>
</li>
</li>
</ul>
<h3>Rooms</h3>
<ul>
<li>
<input type="checkbox" v-model="checkedRooms" v-bind:value="rooms.id">1DK <input/>
<input type="checkbox" v-model="checkedRooms" v-bind:value="rooms.id">2LDK <input/>
<input type="checkbox" v-model="checkedRooms" v-bind:value="rooms.id">3LDK<input/>
<input type="checkbox" v-model="checkedRooms" v-bind:value="rooms.id">4LDK <input/>
</li>
</ul>
</div>
<div class="col-md-9" v-for="estate in estates" :key="estate.id">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{estate.building_name}}</h5>
<p class="card-text">{{estate.price}}</p>
<p class="card-text">{{estate.address}}</p>
</div>
</div>
</div>
</div>
</div>
</div>