Vuejs2 NuxtJs在何处声明计算属性

如何使用Nuxt声明计算属性？还是同等的

我正在使用NuxtJs并尝试使用类别过滤器

我想按唯一类别进行筛选，收到以下错误消息：

Cannot read property 'filter' of undefined

我试图适应Nuxtjs，我在这支笔中找到了一个例子：

我在下面声明这个计算属性，首先在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> 

{{store.category}

我将对您的代码情况进行一些猜测（基于您提到的示例），所以请告诉我我在哪里做出了错误的假设。我猜下面这样的事情对你来说可能有用。。。也许你可以提供更多的细节，我错过了他们

关于您的错误，无法读取未定义的属性“filter”，这可能意味着您的

存储阵列

未定义。我认为，如果在

数据

部分将

存储

数组创建为空，那么在异步调用返回任何结果之前，至少应该让它可用

您可以做一件可能的事情来测试您的过滤逻辑是否正常工作。。。是取消注释我在下面创建的手动创建的数据数组。这就像是对数据结构和逻辑的内联测试，消除了对数据的异步检索。这基本上可以检查过滤器是否在没有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> 

{{store.category}

无论如何这只是一个很大的猜测，你的情况是什么，但我想我会尽力帮助你形成一些问题，以便你能得到更有意义的回答。总的来说，我建议你尽可能多地提供关于你的问题的细节，这样人们才能真正看到事情可能误入歧途的点点滴滴

---

请勿触摸

.nuxt

中的任何内容有人在上面的评论中指出了这一点，这一点非常重要。基本上，整个目录是生成的，您在其中所做的任何更改都可以很容易地被覆盖。

首先，您不应该在.nuxt中触摸任何内容。第二，什么是商店？你声明了吗？Json中有一个30个存储区的列表工作正常。在console.log中，我发现了错误消息：避免直接修改道具，因为只要父组件重新呈现，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。道具正在变异：“stores”我在创建的lifecicle挂钩的pages/index.vue处获取数据，我正在使用axios，我可以看到并显示未过滤的数据：this.stores=response.data我拥有的类别列表；珠宝首饰洗衣房图书馆宠物店旅游服装