feat(DamageCalculator): fill skill buttons when select hero

rudnovd · Apr 2, 2022 · da75ded · da75ded
1 parent 11fa602
commit da75ded
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/DamageCalculator.vue b/src/components/DamageCalculator.vue
@@ -72,6 +72,7 @@
           :key="`${sideName}-skill-${key}-buttons`"
           :color="sideName"
           :name="skill"
+          :value="side.hero.skills[key] || 0"
           :levels="levels.slice(1, levels.length)"
           @click="side.hero!.skills[key] = $event"
         />

diff --git a/src/components/damageCalculator/SelectSkillButtons.vue b/src/components/damageCalculator/SelectSkillButtons.vue
@@ -20,7 +20,7 @@
 <script lang="ts">
 import type { BattleSide } from '@/models/Battle'
 import type { Level } from '@/models/Level'
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, ref, watch } from 'vue'
 
 export default defineComponent({
   name: 'SelectSkillButtons',
@@ -38,10 +38,19 @@ export default defineComponent({
       type: Array as PropType<Array<Level>>,
       required: true,
     },
+    value: {
+      type: Number,
+      required: true,
+    },
   },
   emits: ['click'],
   setup(props, context) {
-    const selectedLevel = ref(0)
+    const selectedLevel = ref(props.value)
+
+    watch(
+      () => props.value,
+      (newValue) => (selectedLevel.value = newValue)
+    )
 
     const onClick = (level: number) => {
       if (level === selectedLevel.value) {