🐛 修复数据更新子组件不更新的bug

src/components/wiki/twc-character.vue

@@ -100,9 +100,10 @@ interface TwcCharacterProps {
   item: TGApp.App.Character.WikiBriefInfo;
 }
 
-interface TwcCharacterEmits {
+type TwcCharacterEmits = {
-  error: (err: Error) => void;
+  (e: "update:modelValue", value: TGApp.App.Character.WikiBriefInfo): void;
-}
+  (e: "error"): void;
+};
 
 const props = defineProps<TwcCharacterProps>();
 const emits = defineEmits<TwcCharacterEmits>();
@@ -126,7 +127,7 @@ const box = computed(() => {
 
 async function loadData(): Promise<void> {
   try {
-    const res = await getWikiData("Character", props.item.id);
+    const res = await getWikiData("Character", props.item.id.toString());
     if (res === undefined) return;
     data.value = res.default;
     showSnackbar({
@@ -139,7 +140,7 @@ async function loadData(): Promise<void> {
       color: "error",
     });
     console.error(error);
-    emits("error", error);
+    emits("error");
   }
 }
 

src/components/wiki/twc-constellations.vue

@@ -2,8 +2,8 @@
   <div class="twc-constellations-box">
     <v-tabs v-model="tab">
       <v-tab
-        v-for="item in props.data"
+        v-for="(item, index) in props.data"
-        :key="item.Id"
+        :key="index"
         :value="item.Name"
         :title="item.Name"
         class="twc-constellation-tab"
@@ -16,8 +16,8 @@
     <v-window v-model="tab">
       <v-window-item
         :value="item.Name"
-        v-for="item in props.data"
+        v-for="(item, index) in props.data"
-        :key="item.Id"
+        :key="index"
         class="twc-constellation-desc"
       >
         <span v-html="parseHtmlText(item.Description)"></span>
@@ -26,7 +26,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { onBeforeMount, onMounted, ref, watch } from "vue";
 
 import { parseHtmlText } from "../../utils/toolFunc";
 
@@ -36,6 +36,14 @@ interface TwcConstellationProps {
 
 const props = defineProps<TwcConstellationProps>();
 const tab = ref<string>();
+
+function loadData(): void {
+  tab.value = props.data[0].Name;
+}
+
+onMounted(loadData);
+
+watch(() => props.data, loadData);
 </script>
 <style lang="css" scoped>
 .twc-constellations-box {

src/components/wiki/twc-skills.vue

@@ -23,7 +23,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 
 import { parseHtmlText } from "../../utils/toolFunc";
 
@@ -35,10 +35,15 @@ const props = defineProps<TwcSkillsProps>();
 const tab = ref<string>();
 const tabValues = ref<Array<{ name: string; icon: string }>>([]);
 
-onMounted(() => {
+function loadData(): void {
+  tabValues.value = [];
   props.data.map((i) => tabValues.value.push({ name: i.Name, icon: i.Icon }));
   tab.value = tabValues.value[0].name;
-});
+}
+
+onMounted(loadData);
+
+watch(() => props.data, loadData);
 </script>
 <style lang="css" scoped>
 .twc-skills-box {