DjangoでAPI&Nuxtで検索機能を実装！

f:id:jyouj:20181124165447p:plain

Djangoで設計したAPIを元にNuxtで検索機能を実装する方法を紹介しようと思います。

DjangoでAPI作成

前回の記事のUser APIを使っていくのでこちらをご覧ください。

jyouj.hatenablog.com

Nuxtで検索機能を実装

APIの受け渡しにはaxiosを使います。これも前回と同じですね。

それではsearch.vueを実装していきましょう。bootstrapを使っています。

<template>
  <div>
    <b-container>
      <form v-on:submit.prevent="search">
        <div class="input-group">
          <input v-model="query" type="text" class="form-control" placeholder="キーワード検索">
        </div>
      </form>

      <b-tabs>
        <b-tab title="ユーザー" active>
          <user v-for="user in users" :key="user.id" :user="user"/>
        </b-tab>
      </b-tabs>
    </b-container>
  </div>
</template>

＜script＞の方はこのようになります。

export default {
  data() {
    return {
      query: ''
    }
  },
  async asyncData(app) {
    const users = await app.$axios.$get(`/api/users/`)
    return { users }
  },
  methods: {
    async search() {
      const users = await this.$axios.get(`/api/users/?search=${this.query}`)
      this.users = users.data
    }
  }
}