NuxtJs 在哪里声明计算属性

Question

如何使用 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> 

Answer 1

我将对您的代码情况进行一些猜测（根据您提到的示例），所以请告诉我我在哪里做出了不正确的假设。我想像下面这样的东西可能对你有用......也许你可以在我错过它们的地方提供更多细节。

关于您的错误无法读取未定义的属性“过滤器”，这可能意味着您的 stores 数组未定义。我相信如果您在 data 部分中将 stores 数组创建为空，您至少应该在异步调用返回任何结果之前使其可用。

您可以做的一件事来测试您的过滤逻辑是否正常工作...取消注释我在下面创建的手动创建的数据数组。这就像对您的数据结构和逻辑的内联测试，消除了对数据的异步检索。这基本上可以检查过滤器是否在没有您的 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中的任何东西 上面有人在评论中指出了这一点，这非常重要。本质上，整个目录都已生成，您在其中所做的任何更改都可以轻松覆盖。