Merge pull request #239 from sue445/feature/vue3

Upgrade to Vue.js v3
sue445 · Dec 25, 2023 · 78d44e6 · 78d44e6
2 parents 62a0ede + b9b4228
commit 78d44e6
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 40 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -71,17 +71,17 @@ <h2>About</h2>
 
   <h2>登録済のグループ一覧</h2>
 
-  <h3><a href="https://connpass.com/">connpass</a> ({{connpass_groups.length}} groups)</h3>
+  <h3><a href="https://connpass.com/">connpass</a> ({{connpassGroups.length}} groups)</h3>
   <ul>
-    <li v-for="group in connpass_groups">
-      <a v-bind:href="group.url">{{group.name}}</a>
+    <li v-for="group in connpassGroups" :key="group.id">
+      <a :href="group.url">{{ group.name }}</a>
     </li>
   </ul>
 
-  <h3><a href="https://www.doorkeeper.jp/">Doorkeeper</a> ({{doorkeeper_groups.length}} groups)</h3>
+  <h3><a href="https://www.doorkeeper.jp/">Doorkeeper</a> ({{doorkeeperGroups.length}} groups)</h3>
   <ul>
-    <li v-for="group in doorkeeper_groups">
-      <a v-bind:href="group.url">{{group.name}}</a>
+    <li v-for="group in doorkeeperGroups" :key="group.id">
+      <a :href="group.url">{{ group.name }}</a>
     </li>
   </ul>
 
@@ -97,7 +97,7 @@ <h3><a href="https://www.doorkeeper.jp/">Doorkeeper</a> ({{doorkeeper_groups.len
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 <script async defer src="https://buttons.github.io/buttons.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <script src="js/app.js"></script>
 </body>

diff --git a/docs/js/app.js b/docs/js/app.js
@@ -1,37 +1,34 @@
-var app = new Vue({
-  el: '#app',
-  data: {
-    connpass_groups: [],
-    doorkeeper_groups: []
+const app = Vue.createApp({
+  data() {
+    return {
+      connpassGroups: [],
+      doorkeeperGroups: [],
+    };
   },
   methods: {
-    getConnpassGroups: function () {
-      var url = 'config/connpass.json';
-      var that = this;
-      axios.get(url).then(function (x) {
-        that.connpass_groups = x.data.groups.map(function (group) {
-          group.url = "https://" + group.id + ".connpass.com/";
-          return group;
-        }).sort(function (a, b) {
-          return that.compareString(a.name, b.name);
-        });
-      });
+    async getConnpassGroups() {
+      try {
+        const response = await axios.get('config/connpass.json');
+        this.connpassGroups = response.data.groups.map((group) => ({
+          ...group,
+          url: `https://${group.id}.connpass.com/`,
+        })).sort((a, b) => this.compareString(a.name, b.name));
+      } catch (error) {
+        console.error('Error fetching Connpass groups:', error);
+      }
     },
-
-    getDoorkeeperGroups: function () {
-      var url = 'config/doorkeeper.json';
-      var that = this;
-      axios.get(url).then(function (x) {
-        that.doorkeeper_groups = x.data.groups.map(function (group) {
-          group.url = "https://" + group.id + ".doorkeeper.jp/";
-          return group;
-        }).sort(function (a, b) {
-          return that.compareString(a.name, b.name);
-        });
-      });
+    async getDoorkeeperGroups() {
+      try {
+        const response = await axios.get('config/doorkeeper.json');
+        this.doorkeeperGroups = response.data.groups.map((group) => ({
+          ...group,
+          url: `https://${group.id}.doorkeeper.jp/`,
+        })).sort((a, b) => this.compareString(a.name, b.name));
+      } catch (error) {
+        console.error('Error fetching Doorkeeper groups:', error);
+      }
     },
-
-    compareString: function (a, b) {
+    compareString(a, b) {
       a = a.toUpperCase();
       b = b.toUpperCase();
       if (a < b) {
@@ -41,10 +38,12 @@ var app = new Vue({
         return 1;
       }
       return 0;
-    }
+    },
   },
-  mounted: function () {
+  mounted() {
     this.getConnpassGroups();
     this.getDoorkeeperGroups();
-  }
+  },
 });
+
+app.mount('#app');