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

我将根据您提到的示例对您的代码情况进行一些猜测，所以请让我知道我在哪里做出了错误的假设。我猜想像这样的事情可能对您有用...也许您可以在我想念他们的地方提供其他详细信息。

关于您的错误 无法读取未定义的属性'filter' ，这可能意味着您的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 中的任何内容，有人在上面的评论中指出了这一点，这一点非常重要。本质上，整个目录都是生成的，您在其中所做的任何更改都可以轻松覆盖。

NuxtJs在哪里声明计算属性

1 个答案: