Help us understand the problem. What is going on with this article?

【Vue.js】YouTube Data APIをaxiosで取得し表示するサンプル(Firebase・Vue CLI v4.0.4)

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Firebase Hosting
⭐️Vue CLI v4.0.4

YouTube Data APIをaxiosで取得し表示するサンプル
Firebase HostingとVue CLI v4.0.4を使います。

↓↓実際に動かしてみた動画
https://twitter.com/nonnonkapibara/status/1185956946630692864

先に、YouTube APIを取得する。
詳細は下記に記載してます。

【Vue.js】Vue.jsで使う為のYouTube動画検索「YouTube Data API v3」のAPIキー取得
https://qiita.com/nonkapibara/items/591cdb2ab9aea7ea55b9

プロジェクトを作成する。詳細は、下記に記載しています。

【Vue.js】FirebaseプロジェクトでVue CLI v4.0.4を作成する(Firebase・Vue CLI v4.0.4)
https://qiita.com/nonkapibara/items/6146106c524b652f49db

ファイル構成

スクリーンショット 2019-10-21 0.51.26.png

①App.vue

TOPページの上のリンクに「Search Video」を追加する
スクリーンショット 2019-10-21 0.53.04.png

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/video">Search Video</router-link>
    </div>
    <router-view/>
  </div>
</template>

スクリーンショット 2019-10-21 0.56.14.png

②components - SearchVideo.vue

「YouTube Search list (Vue.js CLI)」のページ
スクリーンショット 2019-10-21 0.59.22.png

<template>
<div>
  <div><font size="6" color="#c71585">YouTube Search list (Vue.js CLI)</font></div>
  <br>
  <input size="40" v-model="keyword" placeholder="検索キーワードを入力">
  <button @click="search_video">検索</button>
  <table cellspacing="0" cellpadding="5" v-show="results">
    <tr>
      <th width="50">
        <font>No</font>
      </th>
      <th width="200">
        <font>Video</font>
      </th>
      <th width="700">
        <font>Contents</font>
      </th>
    </tr>

    <tr v-for="(movie, index) in results" v-bind:key="movie.id.videoId">
      <!-- No -->
      <td valign="top" width="50">{{ index + 1 }}</td>
      <!-- Video -->
      <td valign="top" width="300">
        <a v-bind:href="'https://www.youtube.com/watch?v=' + movie.id.videoId">
          <img width="300" height="200" v-bind:src="movie.snippet.thumbnails.medium.url">
        </a>
      </td>
     <!-- titleとdescription -->
      <td align="left" valign="top" width="700">
        <font size="5" color="#c71585"><b>{{ movie.snippet.title }}</b></font>
        <br>
        {{ movie.snippet.description}}</td>
    </tr>
  </table>
</div>
</template>

<script>
import axios from 'axios';

export default {
  name: "SearchVideo",
  data: function() {
    return {
      results: null,
      keyword: "nonkapibara",
      order: "viewCount", // リソースを再生回数の多い順に並べます。
      params: {
        q: "", // 検索クエリを指定します。
        part: "snippet",
        type: "video",
        maxResults: "20", // 最大検索数
        key: "★★★★★KEYをここに入れる★★★★★"
      }
    };
  },
  props: {
    msg: String
  },
  methods: {
    search_video: function() {
      this.params.q = this.keyword;
      var self = this;
      axios
        .get("https://www.googleapis.com/youtube/v3/search", {
          params: this.params
        })
        .then(function(res) {
          self.results = res.data.items;
        })
    }
  }
};
</script>

<style>

table {
  border-collapse: collapse;
  border: solid 2px #c71585;/*表全体を線で囲う*/
}
table th {
  color: #fff0f5;/*文字色*/
  background: #ff69b4;/*背景色*/
  border: dashed 1px #c71585;
}

table td {
  background: #fff0f5;
  border: dashed 1px #c71585;
}

</style>

③ router - index.js

  {
    path: '/video',
    name: 'video',
    component: () => import('../views/Video.vue')
  }

スクリーンショット 2019-10-21 1.04.40.png

④ views - Video.vue

スクリーンショット 2019-10-21 1.07.45.png

<template>
  <div class="app">
    <SearchVideo/>
  </div>
</template>

<script>
import SearchVideo from '@/components/SearchVideo.vue'

export default {
  name: 'app',
  components: {
    SearchVideo
  }
}
</script>

完成!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした