Блог

Как я могу объявить вычисляемое свойство с помощью Nuxt? или эквивалент?

Я использую NuxtJs и пытаюсь использовать фильтр категорий.

Я хочу фильтровать по уникальным категориям, и я получаю это сообщение об ошибке:

 Cannot read property 'filter' of undefined
  

Я пытаюсь адаптировать к Nuxtjs пример, который я нашел в этом разделе:https://codepen.io/blakewatson/pen/xEXApK

Я объявляю это вычисляемое свойство ниже, сначала в pages/index.vue и после в .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;

        });

      }
    }
  

И я пытаюсь применить фильтр к этому списку флажков :

 <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> 
  

Я собираюсь сделать некоторые предположения о ситуации с вашим кодом (на основе примера, который вы отметили), поэтому просто дайте мне знать, где я делаю неверное предположение. Я бы предположил, что для вас может сработать что-то вроде следующего … возможно, вы могли бы предоставить дополнительные сведения, где я их упускаю.

Что касается вашей ошибки, не удается прочитать свойство ‘filter’ из undefined, это, вероятно, означает, что ваш массив stores не определен. Я полагаю, что если вы создадите stores массив как пустой в data разделе, вы должны по крайней мере иметь его доступным, прежде чем ваш асинхронный вызов вернет какие-либо результаты.

Вы можете сделать одну возможную вещь, чтобы проверить, работает ли ваша логика фильтрации… заключается в раскомментировании созданного вручную массива данных, который я создал ниже. Это похоже на встроенный тест для вашей структуры данных и логики, устраняющий асинхронный поиск ваших данных. Это в основном может проверить, работает ли фильтр без вашего вызова API. Это, по крайней мере, сузило бы вашу проблему.

 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);
            });
    }
};
  

И затем ваш 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> 
  

В любом случае это всего лишь предположение и каков ваш сценарий, но я решил, что попытаюсь помочь сформулировать ваш вопрос, чтобы вы могли получить более значимый ответ. В общем, я бы посоветовал попытаться предоставить как можно больше подробностей о вашем вопросе, чтобы люди действительно могли видеть фрагменты, где что-то могло сбиться с пути.

Ничего не трогайте в .nuxt Кто-то отметил это выше в комментарии, и это очень важно. По сути, создается весь каталог, и любые изменения, которые вы вносите в него, могут быть легко перезаписаны.