vue-filters.md

Problem:

In TheFilterBar there are two filter options that pass a value to App.vue and it is currently only possiby to filter by either one value.

Desired solution:

I would like to be able to filter by either value or by both values together, but can't get to the second value, once the other has been updated. The methods below need to be adjusted, but at the moment I can't get the second value… A result like this with the method taking multiple arguments, e.g. filteredPosts(type, area) would be the preferred outcome:

axios.get(API_URL + '/miss' + '?type=' + type + '&area=' + area)

Unless there's a better idea on how to solve this ;)

<template>
	<div id="app" class="app-wrapper">
		<TheHeader />
		<TheFilterBar @posts-by-type="postsByType" @posts-by-area="postsByArea" />
		<div class="content-wrapper">
			<router-view :posts="posts" :pagination="pagination" />
		</div>
	</div>
</template>

<script>

	…

export default {
	data: function() {
		return {
			posts: [],
			pagination: []
		}
	},
	created() {
		axios.get(API_URL + '/miss')
		.then((response) => {
			this.posts = response.data.posting
			this.pagination = response.data.pagination
		})
		.catch((e) => {
			console.error(e)
		})
	},
	methods: {
		postsByType(type) {
			axios.get(API_URL + '/miss' + '?type=' + type)
			.then((response) => {
				this.posts = response.data.posting
				this.pagination = response.data.pagination
			})
			.catch((e) => {
				console.error(e)
			})
		},
		postsByArea(area) {
			if(area == 'All districts') { area = ''; }
			axios.get(API_URL + API_URL + '/miss' + '?area=' + area)
			.then((response) => {
				this.posts = response.data.posting
				this.pagination = response.data.pagination
			})
			.catch((e) => {
				console.error(e)
			})
		}
	}
}

</script>

<template>

	<div>

		<label>a
			<input type="radio" id="a" value="a" v-model="type" @change="getPostsByType($event)">
		</label>
		<label>b
			<input type="radio" id="b" value="b" v-model="type" @change="getPostsByType($event)">
		</label>
		<label>c
			<input type="radio" id="c" value="c" v-model="type" @change="getPostsByType($event)">
		</label>
		<label>d
			<input type="radio" id="d" value="d" v-model="type" @change="getPostsByType($event)">
		</label>

		<select v-model="area" @change="getPostsByArea($event)">
			<option disabled value="Select Area">Select Area</option>
			<option>All districts</option>
			<option>Wan Chai</option>
		</select>

	</div>

</template>

<script>

export default {
	name: 'TheFilterBar',
	data() {
		return {
			area: this.event,
			type: this.event
		}
	},
	methods: {
		getPostsByType(event) {
			this.$emit('posts-by-type', event.target.value);
		},
		getPostsByArea(event) {
			this.$emit('posts-by-area', event.target.value);
		}
	}
}
</script>

just have a few seconds, but I would structure it like this:

App:
data: area, type (you could also prefill them via router props)
methods:

areaChange(value): this.area = value; this.getPosts()
typeChange(value): this.type = value; this.getPosts()
getPosts(): axios.get... this.area,this.type // no URL fiddling by hand, should be as props. Stackoverflow it :D

create: getPosts

Pass data as props to Filterbar (:area="area",:type="type"), events @areaChange, @typechange

In Filterbar:

received props: area, type
data: filterArea, filterType (empty)
create: this.filterArea = this.area, this.filterType = this.type
methods:

filterAreaChange(value): this.filterArea = value; emit(areaChange, value);
filterTypeChange(value): this.filterType = value,; emit(typeChange, value);

Hope you can follow. Idea is to have the attributes in the App. They are passed down to the filter. If they change, they are emitted back and changed in App. The filter has it own copy of the props because props shouldn't/must not be changed directly.