<span class="filter-option">
<input type="checkbox" id="career" checked @change="setFilter" />
<label for="career">Career</label>
</span>
</base-card>
</template>
<!-- we manage the data which filter user chose -->
<script>
export default {
emits: ['change-filter'], //optional tell us the emit change the filter
data() {
return {
filters: {
//means as long as something is true coaches that have that area of expertise should be shown.
frontend: true,
backend: true,
career: true,
},
};
},
methods: {
//to change that data
setFilter(event) {
//receive default event
const inputId = event.target.id;
const isActive = event.target.checked; //event was triggered is now checked or not
const updatedFilters = {
//copy the existing filter then
...this.filters,
// overwrite one of these three properties
//this hold frontend or backend or career[inputId]
//and set new value for this dynamic set property //:isActive
//which is tru or false
[inputId]: isActive,
};
//set this filters to updatedFilters
this.filters = updatedFilters;
// tell the component that uses coachFilter componet know about my filters
this.$emit('change-filter', updatedFilters); //custome event we will listen in coachlist componet
},