vuejs2 - “过滤器不是函数”计算属性上的类型错误，带有箭头函数的简单过滤器

Question

在下面的代码片段中，如果我删除.filter(beer => beer.isFavourite)计算的属性没有错误，基本上变成与 allBrewDogBeers 相同的值。当我添加过滤器时，我得到"TypeError: this.allBrewDogBeers.filter is not a function". 我想这可能与上下文有关，但我不太明白我缺少什么，因为我之前写过一个像这样简单的过滤器，但也许 Vue 让我感到困惑。

我只想拥有一个计算属性，它是 allBrewDogBeers 的子集，我将此计算属性绑定到我的模板中最喜欢的组件。

computed: {
    favouriteBeers: function() {
      return this.allBrewDogBeers.filter(beer => beer.isFavourite);
    }
  },

完整脚本：

<script>
import { eventBus }  from './main.js'

import BeerList from './components/BeerList.vue'
import BeerDetail from './components/BeerDetail.vue'
import FavouriteBeers from './components/FavouriteBeers.vue'

export default {
  name: "App",
  components: {
    'beer-list': BeerList,
    'beer-detail': BeerDetail,
    'favourite-beers': FavouriteBeers
  },
  data() {
    return {
      allBrewDogBeers: [],
      selectedBeer: null
    };
  },
  computed: {
    favouriteBeers: function() {
      return this.allBrewDogBeers.filter(beer => beer.isFavourite);
    }
  },
  methods:{
      addFavourBeer: function(beer) {
        const index = this.allBrewDogBeers.indexOf(beer);
      this.allBrewDogBeers[index].isFavourite = true; 

      },
      removeFavourBeer: function(beer) {
        const index = this.allBrewDogBeers.indexOf(beer);
      this.allBrewDogBeers[index].isFavourite = false;
      }
    },
  mounted(){ 
      fetch("https://api.punkapi.com/v2/beers")
      .then(response => this.allBrewDogBeers = response.json())
      .then(data => this.allBrewDogBeers = data);

      eventBus.$on('beer-selected', (beer) => {this.selectedBeer = beer});
      eventBus.$on('beer-favourite-add', beer => this.addFavourBeer(beer));
      eventBus.$on('beer-favourite-remove', beer => this.removeFavourBeer(beer));
    }
};
</script>

标签： vuejs2

Answer 1

你这里有问题：

.then(response => this.allBrewDogBeers = response.json())

那是给 分配一个承诺this.allBrewDogBeers，这不是你想要的。

将其更改为：

.then(response => response.json())

另一个then将处理分配。