Filters
Vue Bootstrap 5 Filters plugin
Filters are the best way to select data that meets your requirements - they affect your search results by filtrating and sorting the dataset you pass to our component.
Note: Read the API tab to find all available options and advanced customization
Basic example - DOM Elements
Use the items prop to define a container with data to filter. This
is required for proper component initialization.
Add data-mdb-filter-property to every item you want to be filtrable. If you
want to handle your filters by inputs, make a container for them, and add
data-mdb-filter-property to it.
Note: You must have at least one filtrable element for a component to work properly.
<template>
<MDBFilter
items=".basic-example-item"
:filters="{ color: colorRadio, sale: saleRadio }"
>
<MDBRow class="justify-content-center">
<MDBCol md="6">
<span class="fa-lg">Filter: Color</span>
<MDBRadio
label="Black"
wrapperClass="mt-3"
name="colorRadio"
v-model="colorRadio"
value="black"
/>
<MDBRadio
label="Red"
name="colorRadio"
v-model="colorRadio"
value="red"
/>
<MDBRadio
label="Blue"
name="colorRadio"
v-model="colorRadio"
value="blue"
/>
<MDBRadio
label="Gray"
name="colorRadio"
v-model="colorRadio"
value="gray"
/>
</MDBCol>
<MDBCol md="6">
<span class="fa-lg mb-5">Filter: Sale</span>
<MDBRadio
label="Yes"
wrapperClass="mt-3"
name="saleRadio"
v-model="saleRadio"
value="yes"
/>
<MDBRadio
label="No"
name="saleRadio"
v-model="saleRadio"
value="no"
/>
<MDBBtn
color="primary"
class="mt-3"
id="reset-button"
@click="resetRadios"
>
Clear all filters
</MDBBtn >
</MDBCol>
</MDBRow>
<MDBRow class="text-center">
<MDBCol
md="4"
class="mt-3 basic-example-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 basic-example-item"
data-mdb-filter-sale="yes"
data-mdb-filter-color="gray"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 basic-example-item"
data-mdb-filter-color="blue"
data-mdb-filter-sale="no"
data-mdb-filter-price="90"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
<MDBCardText>90$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 basic-example-item"
data-mdb-filter-color="red"
data-mdb-filter-sale="yes"
data-mdb-filter-price="120"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Red Hoodie</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 basic-example-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 basic-example-item"
data-mdb-filter-color="gray"
data-mdb-filter-sale="yes"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBFilter>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
},
setup() {
const colorRadio = ref("");
const saleRadio = ref("");
const resetRadios = () => {
colorRadio.value = "";
saleRadio.value = "";
};
return {
colorRadio,
saleRadio,
resetRadios,
};
},
};
</script>
Checkbox example
Note: If there is more than one option, the result of filtering will show items that match both of them.
<template>
<MDBFilter
items=".checkbox-example-item"
:filters="{ color: colorCheckboxes, sale: saleCheckboxes }"
>
<MDBRow class="justify-content-center">
<MDBCol md="6">
<span class="fa-lg">Filter: Color</span>
<MDBCheckbox
label="Red"
v-model="colorCheckboxes.red"
wrapperClass="mt-3"
/>
<MDBCheckbox label="Blue" v-model="colorCheckboxes.blue" />
<MDBCheckbox label="Black" v-model="colorCheckboxes.black" />
<MDBCheckbox label="Gray" v-model="colorCheckboxes.gray" />
</MDBCol>
<MDBCol md="6">
<span class="fa-lg mb-5">Filter: Sale</span>
<MDBCheckbox
label="Yes"
wrapperClass="mt-3"
v-model="saleCheckboxes.yes"
/>
<MDBCheckbox label="No" v-model="saleCheckboxes.no" />
<MDBBtn
color="primary"
class="mt-3"
id="reset-button"
@click="resetCheckboxes"
>
Clear all filters
</MDBBtn >
</MDBCol>
</MDBRow>
<MDBRow class="text-center">
<MDBCol
md="4"
class="mt-3 checkbox-example-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 checkbox-example-item"
data-mdb-filter-sale="yes"
data-mdb-filter-color="gray"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 checkbox-example-item"
data-mdb-filter-color="blue"
data-mdb-filter-sale="no"
data-mdb-filter-price="90"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
<MDBCardText>90$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 checkbox-example-item"
data-mdb-filter-color="red"
data-mdb-filter-sale="yes"
data-mdb-filter-price="120"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Red Hoodie</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 checkbox-example-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 checkbox-example-item"
data-mdb-filter-color="gray"
data-mdb-filter-sale="yes"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBFilter>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBCheckbox,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBCheckbox,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
},
setup() {
const colorCheckboxes = ref({
red: false,
blue: false,
black: false,
gray: false,
});
const saleCheckboxes = ref({
yes: false,
no: false,
});
const resetCheckboxes = () => {
Object.keys(colorCheckboxes.value).forEach((key) => {
colorCheckboxes.value[key] = false;
});
Object.keys(saleCheckboxes.value).forEach((key) => {
saleCheckboxes.value[key] = false;
});
};
return {
colorCheckboxes,
saleCheckboxes,
resetCheckboxes,
};
},
};
</script>
Color example
<template>
<MDBFilter
items=".color-example-item"
:filters="{ color: colorButtonsRadio }"
>
<MDBRow class="justify-content-center">
<MDBCol md="12" class="text-center mb-3">
<p class="fa-lg mt-2 mb-4">Filter: Color</p>
<MDBRadio
inline
label=" "
labelClass="btn bg-danger btn-rounded p-4"
name="colorButtonsRadio"
v-model="colorButtonsRadio"
value="red"
hidden
/>
<MDBRadio
inline
label=" "
labelClass="btn bg-primary btn-rounded p-4"
name="colorButtonsRadio"
v-model="colorButtonsRadio"
value="blue"
hidden
/>
<MDBRadio
inline
label=" "
labelClass="btn bg-dark btn-rounded p-4"
name="colorButtonsRadio"
v-model="colorButtonsRadio"
value="black"
hidden
/>
<MDBRadio
inline
label=" "
labelClass="btn bg-dark opacity-50 btn-rounded p-4"
name="colorButtonsRadio"
v-model="colorButtonsRadio"
value="gray"
hidden
/>
</MDBCol>
<MDBCol md="12" class="my-3 text-center">
<MDBBtn
color="primary"
class="mt-3"
id="reset-button"
@click="resetButtonsRadio"
>
Clear all filters
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBRow class="text-center">
<MDBCol
md="4"
class="mt-3 color-example-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 color-example-item"
data-mdb-filter-sale="yes"
data-mdb-filter-color="gray"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 color-example-item"
data-mdb-filter-color="blue"
data-mdb-filter-sale="no"
data-mdb-filter-price="90"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
<MDBCardText>90$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 color-example-item"
data-mdb-filter-color="red"
data-mdb-filter-sale="yes"
data-mdb-filter-price="120"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Red Hoodie</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 color-example-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 color-example-item"
data-mdb-filter-color="gray"
data-mdb-filter-sale="yes"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBFilter>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
},
setup() {
const colorButtonsRadio = ref("");
const resetButtonsRadio = () => {
colorButtonsRadio.value = "";
};
return {
colorButtonsRadio,
resetButtonsRadio,
};
},
};
</script>
Size example
<template>
<MDBFilter
items=".size-item"
:filters="{ size: sizeCheckboxes, sale: saleRadio2 }"
>
<MDBRow class="justify-content-center">
<MDBCol md="6" data-mdb-filter-filter="size">
<span class="fa-lg">Filter: Size</span>
<MDBCheckbox
label="36"
v-model="sizeCheckboxes['36']"
wrapperClass="mt-3"
/>
<MDBCheckbox label="38" v-model="sizeCheckboxes['38']" />
<MDBCheckbox label="40" v-model="sizeCheckboxes['40']" />
<MDBCheckbox label="42" v-model="sizeCheckboxes['42']" />
</MDBCol>
<MDBCol md="6">
<span class="fa-lg mb-5">Filter: Sale</span>
<MDBRadio
label="Yes"
wrapperClass="mt-3"
name="saleRadio2"
v-model="saleRadio2"
value="yes"
/>
<MDBRadio
label="No"
name="saleRadio2"
v-model="saleRadio2"
value="no"
/>
<MDBBtn
color="primary"
class="mt-3"
id="reset-button"
@click="resetFilters"
>
Clear all filters
</MDBBtn >
</MDBCol>
</MDBRow>
<MDBRow class="text-center">
<MDBCol
md="4"
class="mt-3 size-item"
data-mdb-filter-size="[36,38,40,42]"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 size-item"
data-mdb-filter-sale="yes"
data-mdb-filter-size="[40,42]"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 size-item"
data-mdb-filter-size="[38]"
data-mdb-filter-sale="no"
data-mdb-filter-price="90"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
<MDBCardText>90$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 size-item"
data-mdb-filter-size="[36]"
data-mdb-filter-sale="yes"
data-mdb-filter-price="120"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Red Hoodie</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 size-item"
data-mdb-filter-size="[36,40,42]"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 size-item"
data-mdb-filter-size="[36,38,40]"
data-mdb-filter-sale="yes"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBFilter>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBCheckbox,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBCheckbox,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
},
setup() {
const sizeCheckboxes = ref({
36: false,
38: false,
40: false,
42: false,
});
const saleRadio2 = ref("");
const resetFilters = () => {
Object.keys(sizeCheckboxes.value).forEach((key) => {
sizeCheckboxes.value[key] = false;
});
saleRadio2.value = "";
};
return {
sizeCheckboxes,
saleRadio2,
resetFilters,
};
},
};
</script>
Animations with DOM Elements
Add data-mdb-filter-animation attribute with animation type to filtrable elements to
animate them. The full list of available animations you can find
here.
<template>
<MDBFilter
items=".animation-dom-item"
data-mdb-filter-animation="fade-in"
:filters="{ color: colorRadio3, sale: saleRadio3 }"
>
<MDBRow class="justify-content-center">
<MDBCol md="6">
<span class="fa-lg">Filter: Color</span>
<MDBRadio
label="Black"
wrapperClass="mt-3"
name="colorRadio3"
v-model="colorRadio3"
value="black"
/>
<MDBRadio
label="Red"
name="colorRadio3"
v-model="colorRadio3"
value="red"
/>
<MDBRadio
label="Blue"
name="colorRadio3"
v-model="colorRadio3"
value="blue"
/>
<MDBRadio
label="Gray"
name="colorRadio3"
v-model="colorRadio3"
value="gray"
/>
</MDBCol>
<MDBCol md="6">
<span class="fa-lg mb-5">Filter: Sale</span>
<MDBRadio
label="Yes"
wrapperClass="mt-3"
name="saleRadio3"
v-model="saleRadio3"
value="yes"
/>
<MDBRadio
label="No"
name="saleRadio3"
v-model="saleRadio3"
value="no"
/>
<MDBBtn
color="primary"
class="mt-3"
id="reset-button"
@click="resetRadios3"
>
Clear all filters
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBRow class="text-center">
<MDBCol
md="4"
class="mt-3 animation-dom-item"
data-mdb-filter-animation="fade-in"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 animation-dom-item"
data-mdb-filter-animation="fade-in"
data-mdb-filter-sale="yes"
data-mdb-filter-color="gray"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span>
</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 animation-dom-item"
data-mdb-filter-animation="fade-in"
data-mdb-filter-color="blue"
data-mdb-filter-sale="no"
data-mdb-filter-price="90"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
<MDBCardText>90$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 animation-dom-item"
data-mdb-filter-animation="fade-in"
data-mdb-filter-color="red"
data-mdb-filter-sale="yes"
data-mdb-filter-price="120"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Red Hoodie</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg ps-1">120$</span>
</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 animation-dom-item"
data-mdb-filter-animation="fade-in"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 animation-dom-item"
data-mdb-filter-animation="fade-in"
data-mdb-filter-color="gray"
data-mdb-filter-sale="yes"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span>
</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBFilter>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBRadio,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
},
setup() {
const colorRadio3 = ref("");
const saleRadio3 = ref("");
const resetRadios3 = () => {
colorRadio3.value = "";
saleRadio3.value = "";
};
return {
colorRadio3,
saleRadio3,
resetRadios3,
};
},
};
</script>
Data structure - array
Note: Your items dataset can be an array of items. We made
this solution for backend needs.
Filter: Color
Filter: Sale
<template>
<MDBRow class="justify-content-center">
<MDBCol md="6">
<span class="fa-lg">Filter: Color</span>
<MDBRadio
label="Black"
wrapperClass="mt-3"
name="colorRadio4"
v-model="colorRadio4"
value="black"
/>
<MDBRadio
label="Red"
name="colorRadio4"
v-model="colorRadio4"
value="red"
/>
<MDBRadio
label="Blue"
name="colorRadio4"
v-model="colorRadio4"
value="blue"
/>
<MDBRadio
label="Gray"
name="colorRadio4"
v-model="colorRadio4"
value="gray"
/>
</MDBCol>
<MDBCol md="6">
<span class="fa-lg mb-5">Filter: Sale</span>
<MDBRadio
label="Yes"
wrapperClass="mt-3"
name="saleRadio4"
v-model="saleRadio4"
value="yes"
/>
<MDBRadio
label="No"
name="saleRadio4"
v-model="saleRadio4"
value="no"
/>
<MDBBtn
color="primary"
class="mt-3"
id="reset-button"
@click="resetRadios4"
>
Clear all filters
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBFilter
:dataset="filterDataset"
:template="filterTemplate"
:filters="{ color: colorRadio4, sale: saleRadio4 }"
items=".filter-item"
class="row text-center"
/>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBRadio,
MDBBtn
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBRadio,
MDBBtn
},
setup() {
const colorRadio4 = ref("");
const saleRadio4 = ref("");
const resetRadios4 = () => {
colorRadio4.value = "";
saleRadio4.value = "";
};
const filterDataset = ref([
{
id: 1,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 2,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 3,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 4,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 5,
color: "red",
price: 120,
sale: "yes",
product: "Red Hoodie",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
},
{
id: 6,
color: "blue",
price: 90,
sale: "no",
product: "Blue Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
},
]);
const filterTemplate = (item) => `
<div class="col-md-4 mt-3 filter-item" data-mdb-filter-color="${item.color}" data-mdb-filter-sale="${item.sale}">
<div class="card shadow-2">
<img src="${item.img}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.product}</h5>
<p class="card-text">${item.price}$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
return {
colorRadio4,
saleRadio4,
resetRadios4,
filterDataset,
filterTemplate,
};
},
};
</script>
Spinner & Asynchronous Data example
Price:
<template>
<MDBRow class="justify-content-center mb-5">
<p class="text-center fa-lg fw-bold">Price:</p>
<MDBCol md="3" class="mt-3 text-center">
<MDBInput
type="number"
v-model="defaultMinPrice"
@change="handleMinPriceChange"
/>
</MDBCol>
<MDBCol md="3" class="mt-3 text-center">
<MDBInput
type="number"
v-model="defaultMaxPrice"
@change="handleMaxPriceChange"
/>
</MDBCol>
</MDBRow>
<MDBRow v-if="loading" class="text-center mb-5">
<MDBCol md="12">
<MDBSpinner grow color="primary" />
</MDBCol>
</MDBRow>
<MDBFilter
v-else
:dataset="filterDataset2"
:template="filterTemplate2"
:filters="{ price: { min: minPrice, max: maxPrice } }"
items=".filter-item"
class="row text-center mt-3"
style="max-height: 800px; overflow-y: scroll"
/>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBInput,
MDBSpinner,
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBInput,
MDBSpinner,
},
setup() {
const defaultMinPrice = ref(0);
const defaultMaxPrice = ref(200);
const minPrice = ref(0);
const maxPrice = ref(200);
const loading = ref(true);
const filterDataset2 = ref([]);
const loadData = () => {
loading.value = true;
setTimeout(() => {
fetch("products.json")
.then((response) => response.json())
.then((data) => {
filterDataset2.value = data;
loading.value = false;
});
}, 1000);
};
const filterTemplate2 = (item) => `
<div class="col-md-4 mt-3 filter-item" data-mdb-filter-price="${item.price}">
<div class="card shadow-2">
<img src="${item.image}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.name}</h5>
<p class="card-text">${item.price}$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
loadData();
const handleMinPriceChange = (event) => {
minPrice.value = event.target.value;
loadData();
};
const handleMaxPriceChange = (event) => {
maxPrice.value = event.target.value;
loadData();
};
return {
defaultMinPrice,
defaultMaxPrice,
minPrice,
maxPrice,
filterDataset2,
filterTemplate2,
loading,
handleMinPriceChange,
handleMaxPriceChange,
};
},
};
</script>
[
{
"id": 1,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40"],
"condition": "new",
"color": "blue",
"price": 12.99,
"keywords": ["t-shirt", "sweatshitrt"],
"discount": 0,
"gender": "male"
},
{
"id": 2,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40", "44"],
"condition": "new",
"color": "red",
"price": 12.99,
"discount": 0,
"gender": "male"
},
{
"id": 3,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36"],
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10,
"gender": "male"
},
{
"id": 4,
"category": "jackets",
"name": "Denim Jacket",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 0,
"gender": "unisex"
},
{
"id": 5,
"category": "jeans",
"name": "Ripped jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/11.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "renewed",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 6,
"category": "jeans",
"name": "Boyfriend jeans",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/10.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": false,
"size": ["34", "36", "38", "40"],
"condition": "used",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 7,
"category": "shirts",
"name": "Ripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "collectible",
"color": "white",
"price": 29.99,
"discount": 5,
"gender": "female"
},
{
"id": 8,
"category": "shirts",
"name": "Longsleeve",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40"],
"condition": "collectible",
"color": "black",
"price": 120.99,
"discount": 0,
"gender": "male"
},
{
"id": 8,
"category": "shirts",
"name": "Stripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/6.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "white",
"price": 32.99,
"discount": 10,
"gender": "female"
},
{
"id": 9,
"category": "trousers",
"name": "Red chinos",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "red",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 10,
"category": "coats",
"name": "Camel coat",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "used",
"color": "brown",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 11,
"category": "jeans",
"name": "Blue jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "blue",
"price": 42.99,
"discount": 0,
"gender": "female"
},
{
"id": 12,
"category": "shirts",
"name": "Orange T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "orange",
"price": 12.99,
"discount": 0,
"gender": "female"
},
{
"id": 13,
"category": "skirts",
"name": "Ballerina skirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["38", "36"],
"condition": "collectible",
"color": "white",
"price": 12.99,
"discount": 0,
"gender": "female"
}
]
Animations - Array of Items
Add data-mdb-filter-animation attribute with animation type to filtrable elements to
animate them. The full list of available animations you can find
here.
Filter: Color
Filter: Sale
<template>
<MDBRow class="justify-content-center">
<MDBCol md="6">
<span class="fa-lg">Filter: Color</span>
<MDBRadio
label="Black"
wrapperClass="mt-3"
name="colorRadio5"
v-model="colorRadio5"
value="black"
/>
<MDBRadio
label="Red"
name="colorRadio5"
v-model="colorRadio5"
value="red"
/>
<MDBRadio
label="Blue"
name="colorRadio5"
v-model="colorRadio5"
value="blue"
/>
<MDBRadio
label="Gray"
name="colorRadio5"
v-model="colorRadio5"
value="gray"
/>
</MDBCol>
<MDBCol md="6">
<span class="fa-lg mb-5">Filter: Sale</span>
<MDBRadio
label="Yes"
wrapperClass="mt-3"
name="saleRadio5"
v-model="saleRadio5"
value="yes"
/>
<MDBRadio
label="No"
name="saleRadio5"
v-model="saleRadio5"
value="no"
/>
<MDBBtn
color="primary"
class="mt-3"
id="reset-button"
@click="resetRadios5"
>
Clear all filters
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBFilter
:dataset="filterDataset5"
:template="filterTemplate5"
:filters="{ color: colorRadio5, sale: saleRadio5 }"
items=".filter-item"
class="row text-center"
/>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBRadio,
MDBBtn
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBRadio,
MDBBtn
},
setup() {
const colorRadio5 = ref("");
const saleRadio5 = ref("");
const resetRadios5 = () => {
colorRadio5.value = "";
saleRadio5.value = "";
};
const filterDataset5 = ref([
{
id: 1,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 2,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 3,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 4,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 5,
color: "red",
price: 120,
sale: "yes",
product: "Red Hoodie",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
},
{
id: 6,
color: "blue",
price: 90,
sale: "no",
product: "Blue Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
},
]);
const filterTemplate5 = (item) => `
<div
class="col-md-4 mt-3 filter-item"
data-mdb-filter-color="${item.color}"
data-mdb-filter-sale="${item.sale}"
data-mdb-filter-animation="fade-in"
>
<div class="card shadow-2">
<img src="${item.img}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.product}</h5>
<p class="card-text">${item.price}$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
return {
colorRadio5,
saleRadio5,
resetRadios5,
filterDataset5,
filterTemplate5,
};
},
};
</script>
Filter and sort
Filter: Color
Filter: Sale
<template>
<MDBRow>
<MDBCol md="6">
<span class="fa-lg">Filter: Color</span>
<MDBRadio label="Black" wrapperClass="mt-3" name="colorRadio6" v-model="colorRadio6" value="black" />
<MDBRadio label="Red" name="colorRadio6" v-model="colorRadio6" value="red" />
<MDBRadio label="Blue" name="colorRadio6" v-model="colorRadio6" value="blue" />
<MDBRadio label="Gray" name="colorRadio6" v-model="colorRadio6" value="gray" />
</MDBCol>
<MDBCol md="6">
<span class="fa-lg mb-5">Filter: Sale</span>
<MDBRadio label="Yes" wrapperClass="mt-3" name="saleRadio6" v-model="saleRadio6" value="yes" />
<MDBRadio label="No" name="saleRadio6" v-model="saleRadio6" value="no" />
<MDBBtn color="primary" class="mt-3" id="reset-button" @click="resetRadios6">
Clear all filters
</MDBBtn>
<MDBCol>
<MDBCol md="8" class="my-5">
<MDBSelect label="Sort" :preselect="false" placeholder="Choose category" v-model:options="sortingOptions6"
v-model:selected="sortingSelected6" />
</MDBCol>
</MDBRow>
<MDBFilter :dataset="filterDataset6" :template="filterTemplate6" :filters="{ color: colorRadio6, sale: saleRadio6 }"
:sort="sort6" items=".filter-item" class="row text-center" />
</template>
<script>
import { ref, watch } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBRadio,
MDBBtn,
MDBSelect
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBRadio,
MDBBtn,
MDBSelect
},
setup() {
const colorRadio6 = ref("");
const saleRadio6 = ref("");
const resetRadios6 = () => {
colorRadio6.value = "";
saleRadio6.value = "";
};
const filterDataset6 = ref([
{
id: 1,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 2,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 3,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 4,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 5,
color: "red",
price: 120,
sale: "yes",
product: "Red Hoodie",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
},
{
id: 6,
color: "blue",
price: 90,
sale: "no",
product: "Blue Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
},
]);
const filterTemplate6 = (item) => `
<div
class="col-md-4 mt-3 filter-item"
data-mdb-filter-color="${item.color}"
data-mdb-filter-sale="${item.sale}"
data-mdb-filter-animation="fade-in"
>
<div class="card shadow-2">
<img src="${item.img}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.product}</h5>
<p class="card-text">${item.price}$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
const sortingOptions6 = ref([
{ text: "Product name ascending", value: 1 },
{ text: "Product name descending", value: 2 },
{ text: "Highest price", value: 3 },
{ text: "Lowest price", value: 4 },
]);
const sortingSelected6 = ref("");
const sort6 = ref({});
watch(
() => sortingSelected6.value,
(selected) => {
switch (selected) {
case 1: {
sort6.value.category = "product";
sort6.value.order = "asc";
break;
}
case 2: {
sort6.value.category = "product";
sort6.value.order = "desc";
break;
}
case 3: {
sort6.value.category = "price";
sort6.value.order = "desc";
break;
}
case 4: {
sort6.value.category = "price";
sort6.value.order = "asc";
break;
}
default: {
return;
}
}
}
);
return {
colorRadio6,
saleRadio6,
resetRadios6,
filterDataset6,
filterTemplate6,
sortingOptions6,
sortingSelected6,
sort6
};
},
};
</script>
Customization - custom filter
Pass an arrow function as the value of the filter key at the filter object to define your custom filter.
<template>
<MDBFilter
:filters="{ price: { min: minRange, max: maxRange } }"
items=".filter-item"
class="row text-center mt-3"
>
<MDBRow class="justify-content-center mb-5">
<MDBCol md="12" class="mt-3 text-center">
<p class="fa-lg">Price:</p>
<MDBRange
label="Min"
v-model="defaultMinRange"
@change="handleMinRangeChange"
:min="80"
:max="120"
/>
<p id="min-val">Current: {{ minRange }}$</p>
<MDBRange
label="Max"
v-model="defaultMaxRange"
@change="handleMaxRangeChange"
:min="80"
:max="120"
/>
<p id="min-val">Current: {{ maxRange }}$</p>
</MDBCol>
</MDBRow>
<MDBRow class="text-center">
<MDBCol
md="4"
class="mt-3 filter-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 filter-item"
data-mdb-filter-sale="yes"
data-mdb-filter-color="gray"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 filter-item"
data-mdb-filter-color="blue"
data-mdb-filter-sale="no"
data-mdb-filter-price="90"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
<MDBCardText>90$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 filter-item"
data-mdb-filter-color="red"
data-mdb-filter-sale="yes"
data-mdb-filter-price="120"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Red Hoodie</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 filter-item"
data-mdb-filter-color="black"
data-mdb-filter-sale="no"
data-mdb-filter-price="100"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
<MDBCardText>100$</MDBCardText>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol
md="4"
class="col-md-4 mt-3 filter-item"
data-mdb-filter-color="gray"
data-mdb-filter-sale="yes"
data-mdb-filter-price="80"
>
<MDBCard class="shadow-2">
<MDBCardImg
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
top
alt="..."
/>
<MDBCardBody>
<MDBCardTitle>Gray Jumper</MDBCardTitle>
<MDBCardText>
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
>
<MDBBtn tag="a" color="primary">Buy now</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBFilter>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBRange,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBRange,
MDBCard,
MDBCardImg,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
},
setup() {
const defaultMinRange = ref(80);
const defaultMaxRange = ref(120);
const minRange = ref(80);
const maxRange = ref(120);
const handleMinRangeChange = (event) => {
minRange.value = event.target.value;
};
const handleMaxRangeChange = (event) => {
maxRange.value = event.target.value;
};
return {
defaultMinRange,
defaultMaxRange,
minRange,
maxRange,
handleMinRangeChange,
handleMaxRangeChange,
};
},
};
</script>
Custom sort
<template>
<MDBRow class="justify-content-center">
<MDBCol md="4" class="text-center">
<MDBBtn color="primary" @click="customSort('product', 'asc')">
Sort by product name ascending
</MDBBtn>
</MDBCol>
<MDBCol md="4" class="text-center">
<MDBBtn color="primary" @click="customSort('product', 'desc')">
Sort by product name descending
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBFilter
:dataset="filterDataset7"
:template="filterTemplate7"
:sort="sort7"
items=".filter-item"
class="row text-center"
/>
</template>
<script>
import { ref } from "vue";
import { MDBFilter } from "mdb-vue-filters";
import {
MDBRow,
MDBCol,
MDBBtn
} from "mdb-vue-ui-kit";
export default {
name: "App",
components: {
MDBFilter,
MDBRow,
MDBCol,
MDBBtn
},
setup() {
const sort7 = ref({});
const customSort = (category, order) => {
sort7.value.category = category;
sort7.value.order = order;
};
const filterDataset7 = ref([
{
id: 1,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 2,
color: "black",
price: 100,
sale: "no",
product: "Black Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
},
{
id: 3,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 4,
color: "gray",
price: 80,
sale: "yes",
product: "Gray Jumper",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
},
{
id: 5,
color: "red",
price: 120,
sale: "yes",
product: "Red Hoodie",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
},
{
id: 6,
color: "blue",
price: 90,
sale: "no",
product: "Blue Jeans Jacket",
img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
},
]);
const filterTemplate7 = (item) => `
<div
class="col-md-4 mt-3 filter-item"
data-mdb-filter-color="${item.color}"
data-mdb-filter-sale="${item.sale}"
>
<div class="card shadow-2">
<img src="${item.img}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.product}</h5>
<p class="card-text">${item.price}$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
return {
sort7,
customSort,
filterDataset7,
filterTemplate7,
};
},
};
</script>
Full screen example
<template>
<header>
<MDBNavbar expand="lg" light bg="white" position="sticky" container>
<MDBNavbarToggler @click="collapse = !collapse" target="#navbarSupportedContent"></MDBNavbarToggler>
<MDBNavbarBrand href="#">
<MDBIcon iconStyle="fab" icon="mdb" size="2x" alt="mdb logo" />
</MDBNavbarBrand>
<MDBCollapse v-model="collapse" id="navbarSupportedContent">
<MDBNavbarNav right>
<MDBNavbarItem to="/full-page-example" active class="my-auto">
<MDBBadge color="danger" rounded pill>1</MDBBadge>
<MDBIcon icon="shopping-cart" />
</MDBNavbarItem>
<MDBNavbarItem class="my-auto">
<!-- Navbar dropdown -->
<MDBDropdown class="nav-item" v-model="dropdown">
<MDBDropdownToggle tag="a" class="nav-link" @click="dropdown = !dropdown"><i
class="flag-united-kingdom flag m-0"></i>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="#">Action</MDBDropdownItem>
<MDBDropdownItem href="#">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
<MDBNavbarItem to="/full-page-example" active class="my-auto">Shop</MDBNavbarItem>
<MDBNavbarItem to="/full-page-example" active class="my-auto">Contact</MDBNavbarItem>
<MDBNavbarItem to="/full-page-example" active class="my-auto">Sign in</MDBNavbarItem>
<MDBNavbarItem to="/full-page-example" class="my-auto">
<MDBBtn outline="dark" rounded>Sign up</MDBBtn>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
<div class="p-5 text-center bg-image" style="
background-image: url('https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.jpg');
height: 400px;
">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="mb-3">Shop</h1>
</div>
</div>
</div>
</div>
</header>
<main>
<MDBContainer class="mt-5">
<MDBRow>
<MDBCol md="4">
<section>
<h5>Filters</h5>
<section class="mb-4">
<h6 class="fw-bold mb-3">Condition</h6>
<MDBCheckbox v-model="condition.new" label="New" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBCheckbox v-model="condition.used" label="Used" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBCheckbox v-model="condition.collectible" label="Collectible" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBCheckbox v-model="condition.renewed" label="Renewed" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
</section>
<section class="mb-4">
<h6 class="fw-bold mb-3">Avg. Customer Review</h6>
<MDBRating v-model="rating">
<MDBRatingItem title="1" :index="1" />
<MDBRatingItem title="2" :index="2" />
<MDBRatingItem title="3" :index="3" />
<MDBRatingItem title="4" :index="4" />
<MDBRatingItem title="5" :index="5" />
</MDBRating>
</section>
<section class="mb-4">
<h6 class="fw-bold mb-3">Price</h6>
<MDBRadio name="price" v-model="price" value="under25" label="Under $25" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBRadio name="price" v-model="price" value="25to50" label="$25 to $50" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBRadio name="price" v-model="price" value="50to100" label="$50 to $100" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBRadio name="price" v-model="price" value="100to200" label="$100 to $200" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBRadio name="price" v-model="price" value="over200" label="$200 & above" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
</section>
<section class="mb-4">
<h6 class="fw-bold mb-3">Size</h6>
<MDBCheckbox v-model="size['34']" label="34" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBCheckbox v-model="size['36']" label="36" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBCheckbox v-model="size['38']" label="38" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
<MDBCheckbox v-model="size['40']" label="40" wrapperClass="mb-3"
labelClass="form-check-label text-uppercase small text-muted" />
</section>
<section class="mb-4">
<h6 class="fw-bold mb-3">Color</h6>
<MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-white btn-rounded p-3"
name="colorButtonsRadio" v-model="color" value="white" hidden />
<MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3"
labelClass="btn bg-black opacity-50 btn-rounded p-3" name="colorButtonsRadio" v-model="color"
value="grey" hidden />
<MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-black btn-rounded p-3"
name="colorButtonsRadio" v-model="color" value="black" hidden />
<MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-primary btn-rounded p-3"
name="colorButtonsRadio" v-model="color" value="blue" hidden />
<MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-danger btn-rounded p-3"
name="colorButtonsRadio" v-model="color" value="red" hidden />
<MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-warning btn-rounded p-3"
name="colorButtonsRadio" v-model="color" value="orange" hidden />
</section>
</section>
</MDBCol>
<MDBCol md="8">
<MDBRow class="justify-content-center">
<MDBCol md="6" class="my-auto py-3">
<MDBSelect label="Sort" placeholder="Choose category" v-model:options="sortingOptions"
v-model:selected="sortingSelected" />
</MDBCol>
</MDBRow>
<MDBFilter class="row mb-4" :dataset="filterDataset" :template="filterTemplate" :filters="filters"
:sort="sort" items=".filter-item" />
</MDBCol>
</MDBRow>
</MDBContainer>
</main>
<footer class="bg-dark text-white text-center text-lg-left">
<!-- Socials -->
<div class="bg-primary text-center p-3">
<div class="row">
<div class="col-md-6">
<span class="font-weight-bold">Get connected with us on social networks!</span>
</div>
<div class="col-md-6">
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in ms-4"></i>
<i class="fab fa-twitter ms-4"></i>
<i class="fab fa-facebook-f ms-4"></i>
</div>
</div>
</div>
<!-- Socials -->
<!-- Grid container -->
<div class="container p-5">
<!--Grid row-->
<div class="row p-2">
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">About me</h5>
<hr class="mb-4 mt-0" />
<p>
Here you can use rows and columns to organize your footer content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Products</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a href="#!" class="text-white">MDBootstrap</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">MDWordPress</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">BrandFlow</a>
</li>
<li>
<a href="#!" class="text-white">Bootstrap Angular</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Useful links</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled">
<li class="mb-2">
<a href="#!" class="text-white">Your Account</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">Become an Affiliate</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">Shipping Rates</a>
</li>
<li>
<a href="#!" class="text-white">Help</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Contacts</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled">
<li class="mb-2">
<a href="#!" class="text-white"><i class="far fa-map mr-1"></i> New York, Avenue Street 10</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white"><i class="fas fa-phone-alt mr-1"></i> 042 876 836 908</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white"><i class="far fa-envelope mr-1"></i> company@example.com</a>
</li>
<li>
<a href="#!" class="text-white"><i class="far fa-clock mr-1"></i> Monday - Friday: 10-17</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
</template>
<script>
import {
MDBNavbar,
MDBNavbarToggler,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavbarItem,
MDBCollapse,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBIcon,
MDBBadge,
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBCheckbox,
MDBRating,
MDBRatingItem,
MDBRadio,
MDBSelect,
} from "mdb-vue-ui-kit";
import MDBFilter from "@/components/MDBFilter";
import { ref, computed, watch } from "vue";
export default {
components: {
MDBNavbar,
MDBNavbarToggler,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavbarItem,
MDBCollapse,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBIcon,
MDBBadge,
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBCheckbox,
MDBRating,
MDBRatingItem,
MDBRadio,
MDBSelect,
MDBFilter,
},
setup() {
const collapse = ref(false);
const dropdown = ref(false);
const condition = ref({
new: false,
used: false,
collectible: false,
renewed: false,
});
const rating = ref(0);
const price = ref("");
const size = ref({
34: false,
36: false,
38: false,
40: false,
});
const color = ref("");
const parsedPrice = computed(() => {
if (price.value === "under25") {
return { max: 25 };
} else if (price.value === "25to50") {
return { min: 25, max: 50 };
} else if (price.value === "50to100") {
return { min: 50, max: 100 };
} else if (price.value === "100to200") {
return { min: 100, max: 200 };
} else if (price.value === "over200") {
return { min: 200 };
}
return "";
});
const filters = computed(() => ({
condition: condition.value,
rating: rating.value,
price: parsedPrice.value,
size: size.value,
color: color.value,
}));
const filterDataset = ref([]);
fetch("products.json")
.then((response) => response.json())
.then((data) => {
filterDataset.value = data;
});
const filterTemplate = (item) => `
<div
class="col-md-4 my-4 justify-content-center text-center filter-item"
data-mdb-filter-condition="${item.condition}"
data-mdb-filter-rating="${item.rating}"
data-mdb-filter-price="${item.price}"
data-mdb-filter-size="${item.size}"
data-mdb-filter-color="${item.color}"
data-mdb-filter-animation="fade-in"
>
<div class="bg-image hover-overlay hover-zoom hover-shadow">
<img src="${item.image}" class="img-fluid w-100" alt="..." style="height: 325px" />
<a href="#!">
<div class="mask rounded" style="background-color: rgba(66, 66, 66, 0.2);"></div>
</a>
</div>
<div class="pt-4">
<h5>${item.name}</h5>
<strong>$${item.price}</strong>
</div>
</div>
`;
const sortingOptions = ref([
{ text: "Best rating", value: 1 },
{ text: "Lowest price first", value: 2 },
{ text: "Highest price first", value: 3 },
]);
const sortingSelected = ref("");
const sort = ref({});
watch(
() => sortingSelected.value,
(selected) => {
switch (selected) {
case 1: {
sort.value.category = "rating";
sort.value.order = "desc";
break;
}
case 2: {
sort.value.category = "price";
sort.value.order = "asc";
break;
}
case 3: {
sort.value.category = "price";
sort.value.order = "desc";
break;
}
default: {
return;
}
}
}
);
return {
collapse,
dropdown,
condition,
rating,
price,
size,
color,
filters,
filterDataset,
filterTemplate,
sortingOptions,
sortingSelected,
sort,
};
},
};
</script>
[
{
"id": 1,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40"],
"condition": "new",
"color": "blue",
"price": 12.99,
"keywords": ["t-shirt", "sweatshitrt"],
"discount": 0,
"gender": "male"
},
{
"id": 2,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40", "44"],
"condition": "new",
"color": "red",
"price": 12.99,
"discount": 0,
"gender": "male"
},
{
"id": 3,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36"],
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10,
"gender": "male"
},
{
"id": 4,
"category": "jackets",
"name": "Denim Jacket",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 0,
"gender": "unisex"
},
{
"id": 5,
"category": "jeans",
"name": "Ripped jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/11.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "renewed",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 6,
"category": "jeans",
"name": "Boyfriend jeans",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/10.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": false,
"size": ["34", "36", "38", "40"],
"condition": "used",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 7,
"category": "shirts",
"name": "Ripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "collectible",
"color": "white",
"price": 29.99,
"discount": 5,
"gender": "female"
},
{
"id": 8,
"category": "shirts",
"name": "Longsleeve",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40"],
"condition": "collectible",
"color": "black",
"price": 120.99,
"discount": 0,
"gender": "male"
},
{
"id": 8,
"category": "shirts",
"name": "Stripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/6.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "white",
"price": 32.99,
"discount": 10,
"gender": "female"
},
{
"id": 9,
"category": "trousers",
"name": "Red chinos",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "red",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 10,
"category": "coats",
"name": "Camel coat",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "used",
"color": "brown",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 11,
"category": "jeans",
"name": "Blue jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "blue",
"price": 42.99,
"discount": 0,
"gender": "female"
},
{
"id": 12,
"category": "shirts",
"name": "Orange T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "orange",
"price": 12.99,
"discount": 0,
"gender": "female"
},
{
"id": 13,
"category": "skirts",
"name": "Ballerina skirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["38", "36"],
"condition": "collectible",
"color": "white",
"price": 12.99,
"discount": 0,
"gender": "female"
}
]
Filters - API
Import
<script>
import { MDBFilter } from "mdb-vue-filters";
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
dataset
|
Object | {} |
Allows you to set specific dataset object |
filters
|
Object | {} |
Allows you to set filtering rules |
items
|
String | "" |
Defines items query selector |
noFoundMessage
|
String | "<h3 class='text-center mt-5'>No items found</h3>" |
Defines message if no results |
noFoundMessageElement
|
String | "div" |
Defines message wrapper if no results |
sort
|
Object | {} |
Defines sorting rules |
tag
|
String | "div" |
Defines wrapper element |
template
|
Function | |
Defines template function |
Events
| Name | Description |
|---|---|
update
|
This event fires immediately after any change. It returns an item list. |
For example, to listen on file change add an event
<template>
<MDBFilter @update="handleUpdate" />
</template>