NuxtJs where to declare a computed property

Question

How can i declare a computed property using Nuxt ? or the equivalent ?

I am using NuxtJs and trying to use a category filter.

I want to filter by unique categories, and i am getting this error message:

Cannot read property 'filter' of undefined

I trying to adapt to Nuxtjs the exemple i found in this pen : https://codepen.io/blakewatson/pen/xEXApK

I declare this computed property below, first at pages/index.vue and after into .nuxt/App.js

filteredStore: function() {

      var vm = this;
      var category = vm.selectedCategory;

      if(category=== "All") {

        return vm.stores;

      } else {

        return vm.stores.filter(function(stores) {

          return stores.category === category;

        });

      }
    }

And i try to apply the filter into this list of checkboxes :

<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter" v-for="store in filteredStore" :key="store.id" :store="store">
    <label class="checkbox">
      <input type="checkbox" v-model="selectedCategory" :value="''+store.category">
      {{store.category}}
    </label>                    
  </div>                  
</div> 

Answer 1

I'm going to do some guessing at your code situation (based on the example you noted), so just let me know where I make an incorrect assumption. I would guess that something like the following could work for you... maybe you could provide additional details where I'm missing them.

With regards to your error Cannot read property 'filter' of undefined, that probably means your array of stores is undefined. I believe if you create the stores array as empty in the data section, you should at least have it available before your async call returns any results.

One possible thing to you can do to test if your filtering logic is working... is to uncomment the manually created data array that I've created below. It's like an inline test for your data structure and logic, removing the asynchronous retrieval of your data. This basically can check if the filter works without your API call. It would narrow down your issue at least.

export default {
    data() {
        return {
            stores: [
              // Let's assume you don't have any static stores to start on page load
              // I've commented out what I'm guessing a possible data structure is
              //
              // Example possible stores in pre-created array
              // { name: 'Zales', category: 'Jewelry', id: 1 },
              // { name: 'Petco', category: 'Pet Shop', id: 2 },
              // { name: 'Trip Advisor', category: 'Tourism', id: 3 },
              // { name: 'Old Navy', category: 'Clothes', id: 4 }
            ],
            selectedCategory: 'All'
        }
    },
    computed: {
        // Going to make some small js tweaks
        filteredStores: () {
            const vm = this;
            const category = vm.selectedCategory;

            if (category === "All") {
                return vm.stores;
            } else {
                return vm.stores.filter(store => {
                    return store.category === category;
                });
            }
        }
    },
    async asyncData({ $axios }) {
        $axios
            .$get('https://yourdomain.com/api/stores/some-criteria')
            .then(response => {
                this.stores = response.data;
            })
            .catch(err => {
                // eslint-disable-next-line no-console
                console.error('ERROR', err);
            });
    }
};

And then your HTML

<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter" v-for="store in filteredStores" :key="store.id" :store="store">
    <label class="checkbox">
      <input type="checkbox" v-model="selectedCategory" :value="`${store.category || ''}`">
    {{store.category}}
    </label>
  </div>
</div> 

ANYWAY This is all just a big guess and what your scenario is, but I figured I'd try to help shape your question some so that you could get a more meaningful response. In general, I'd suggest trying to provide as much detail as you can about your question so that people really can see the bits and pieces where things might have gone astray.

Don't touch anything in .nuxt Someone noted that above in a comment, and it's very important. Essentially that whole directory is generated and any changes you make in it can be easily overwritten.