The first step in refactoring to extract a new component is to scaffold a new empty component. Create a ClientApp/components/catalogue/MultiSelectFilter.vue file and give it a template section that looks like this:
<template> <b-row> <b-col cols="6"> <div :class="{ 'filter-item': true, 'active': selected.length === 0 }" @click="clear">All</div> </b-col> <b-col cols="6" v-for="item in items" :key="item"> <div :class="{ 'filter-item': true, 'active': selected.indexOf(item) > -1 }" @click="filter(item)">{{ item }}</div> </b-col> </b-row></template>
Note how similar this is to both of the template sections we just evaluated previously. All we've done is take a direct copy of that HTML, then ...
