Nuxtjs和Axios上的計算屬性？

Question

我想按名稱返回一組唯一的卡片。 我可以使用以下代碼在Vuejs中做到這一點。

<template>
  <div id='Home'>

    <div class="columns is-multiline">
        <card v-for="card in uniqueCards" :card="card" :key="card.id"/>
    </div>

  </div>
</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from '@/components/Site/Card'

export default {
  name: 'Home',
  components: { Card },
  computed: {
    cards () {
      return this.$store.state.cards
    },
    uniqueCards () {
      return uniqBy(this.$store.state.cards, function (r) {
        return r.project
      })
    }
  }
}
</script>

我將我的項目轉換為Nuxtjs，並使用api獲取appCards。 如何使用axios實現與上述相同的功能？ 下面的作品，但我想使用uniqueCards（）函數。 我在這里做錯了什么？

<template>    
    <div id="Home">

        <div class="columns is-multiline">
        <card v-for="card in appCards" :card="card" :key="card.id"/>
        </div>

    </div>
</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from "~/components/Card.vue";

export default {
    components: {
        Card
    },
    data() {
        return {
            appCards: []
        };
    },
    async asyncData({ $axios, params }) {
        try {
            let appCards = await $axios.$get(`/appcards/`);
            return { appCards };
        } catch (e) {
            return { appCards: [] };
        }
    },
    mounted: {
        uniqueCards () {
            uniqBy(this.appCards, function (r) {
                return r.project;
        })
        }
    },
};
</script>

Answer 1

沒關系，讓它起作用！ 我忘記了正確的語法。

<template>    
    <div id="Home">

      <section class="section is-small">
        <div class="container">
          <div class="columns is-multiline">
            <card v-for="card in uniqueCards" :card="card" :key="card.id"/>
          </div>
        </div>
      </section>

    </div>

</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from "~/components/Card.vue";

export default {
  components: {
    Card
  },
  data() {
    return {
      appCards: []
    };
  },
  async asyncData({ $axios, params }) {
    try {
      let appCards = await $axios.$get(`/appcards/`);
      return { appCards }
    } catch (e) {
      return { appCards: [] };
    }
  },
  computed: {
    uniqueCards: function () {
        return uniqBy(this.appCards, function (r) {
            return r.project
      })
    }
  }
};
</script>