Merge pull request #21 from klack710/sp128

watchのサンプルAPIページ
klack710 · Mar 26, 2019 · 47ee676 · 47ee676
2 parents 0b97173 + 28f22d2
commit 47ee676
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 1 deletion.
diff --git a/app/study-vue/public/index.html b/app/study-vue/public/index.html
@@ -18,7 +18,7 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
-    <script src="main.js?ver=1.3"></script>
+    <script src="main.js?ver=1.4"></script>
 </body>
 
 </html>
diff --git a/app/study-vue/public/main.js b/app/study-vue/public/main.js
@@ -26,6 +26,10 @@ var app = new Vue({
         href: "sort_list/index.html",
         text: "sort_list"
       },
+      watch: {
+        href: "watch/index.html",
+        text: "watch"
+      },
     }
   }
 });
diff --git a/app/study-vue/public/watch/index.html b/app/study-vue/public/watch/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>study-vue</title>
+</head>
+
+<body>
+    <div id="app">
+        <select v-model="current">
+            <option v-for="topic in topics" :value="topic.value">
+                {{ topic.name }}
+            </option>
+        </select>
+        <div v-for="item in list">{{ item.full_name }}</div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/app/study-vue/public/watch/main.js b/app/study-vue/public/watch/main.js
@@ -0,0 +1,28 @@
+var app = new Vue({
+  el: "#app",
+  data: {
+    list: [],
+    current: '',
+    topics: [{
+        value: 'vue',
+        name: 'Vue.js'
+      },
+      {
+        value: 'jQuery',
+        name: 'jQuery'
+      },
+    ]
+  },
+  watch: {
+    current: function (val) {
+      // GitHubのAPIからトピックのリポジトリを検索
+      axios.get('https://api.github.com/search/repositories', {
+        params: {
+          q: 'topic:' + val
+        }
+      }).then(function (response) {
+        this.list = response.data.items
+      }.bind(this))
+    }
+  }
+});