Fix tag loading

src/components/lib/AjaxTable.vue

@@ -45,6 +45,7 @@ export default {
       this.load_data();
     },
     load_data() {
+      let limit = this.limit;
       this.loading = true;
       this.$axios
         .get(this.ajax_url, {
@@ -54,9 +55,11 @@ export default {
           }
         })
         .then(res => {
-          this.total = res.data.count;
-          this.tableData = res.data.res.map(this.process);
-          this.loading = false;
+          if (limit === this.limit) {
+            this.total = res.data.count;
+            this.tableData = res.data.res.map(this.process);
+            this.loading = false;
+          }
         })
         .catch(err => {
           this.$SegmentMessage.error(this, '[Ajax Table] Request Failed');

src/components/problem/listTag.vue

@@ -17,45 +17,64 @@
 <script>
 import SegmentTag from './../lib/tag.vue';
 import apiurl from './../../apiurl';
+import AWaitLock from './../../methods/lock';
 
 export default {
   name: 'listTag',
   data() {
     return {
-      rendertags: []
+      rendertags: new Array(),
     };
   },
   props: {
     tags: {
-      type: Array
+      type: Array,
+      required: true,
     },
   },
   watch: {
     tags() {
       this.loadTag();
-    }
+    },
   },
   methods: {
     loadTag() {
       this.rendertags = [];
-      for(let i = 0; i < this.tags.length; i += 1) {
-        this.$axios
-          .get(apiurl('/problem/tag/' + this.tags[i]))
-          .then(detail => {
-            let data = detail.data;
-            this.rendertags.push({
-              color: data.res.color,
-              content: data.res.content
-            });
+      let t = this.$store.state.tags;
+      for (let i = 0; i < this.tags.length; i += 1) {
+        if (t.tagsLock[this.tags[i]] === undefined) {
+          t.tagsLock[this.tags[i]] = new AWaitLock();
+        }
+        if (t.tagsData[this.tags[i]] !== undefined) {
+          this.rendertags[i] = t.tagsData[this.tags[i]];
+        } else {
+          t.tagsLock[this.tags[i]].acquire().then(() => {
+            if (t.tagsData[this.tags[i]] !== undefined) {
+              t.tagsLock[this.tags[i]].release();
+              this.rendertags[i] = t.tagsData[this.tags[i]];
+            } else {
+              this.$axios
+                .get(apiurl('/problem/tag/' + this.tags[i]))
+                .then((detail) => {
+                  let data = detail.data.res;
+                  t.tagsData[this.tags[i]] = {
+                    color: data.color,
+                    content: data.content,
+                  };
+                  this.rendertags[i] = t.tagsData[this.tags[i]];
+                  t.tagsLock[this.tags[i]].release();
+                });
+            }
           });
+        }
       }
-    }
+    },
   },
   mounted() {
     this.loadTag();
   },
   components: {
-    SegmentTag
-  }
+    SegmentTag,
+  },
 };
 </script>

src/methods/lock.js

@@ -0,0 +1,27 @@
+class AWaitLock {
+  constructor() {
+    this.lockQueue = [];
+    this.locked = false;
+  }
+
+  async acquire() {
+    if (this.locked) {
+      let that = this;
+      await new Promise((resolve) => {
+        that.lockQueue.push(resolve);
+      });
+    }
+    this.locked = true;
+    return true;
+  }
+
+  release() {
+    this.locked = false;
+    let resolve = this.lockQueue.pop();
+    if (resolve) {
+      resolve();
+    }
+  }
+}
+
+export default AWaitLock;

src/store/tags.js

@@ -1,6 +1,8 @@
 const tagsstore = {
   state: {
-    displayTags: false
+    displayTags: false,
+    tagsData: new Array(),
+    tagsLock: new Array()
   },
   mutations: {
     setDisplayTag(state, data) {