Блог

Я хочу вернуть массив уникальных карточек по имени. Я смог сделать это в 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 для получения карточек приложений. Как мне достичь той же функциональности, что и выше, используя 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>
  

Неважно, заставило это работать! Я забыл правильный синтаксис.

 <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>