ASP.NET Core 2 and Vue.js

Adding the catalog page filter behavior

In the script section, we first need to import both axios and our newly created filters component:

import axios from "axios";

import Filters from "../components/catalogue/Filters.vue";

Next, we update the components object to register the filters component so that we can make use of it:

components: {  Filters,  ProductList}

We then need to update the object returned from the data() function to include the filters object that we are passing into the filters component:

data() {  return {    products: [],    filters: {      brands: [],      capacity: [],      colours: [],      os: [],      features: []    }  };}

Then we update the setData method to set this property following a successful API call:

methods: {  setData(products, filters) { ...