BulmaBreadcrumbs v-model

ui/src/components/BulmaBreadcrumbs.vue

@@ -4,7 +4,7 @@
       <li
         v-for="(step, index) in steps"
         :key="`step-${index}`"
-        :class="current === index ? 'is-active' : ''"
+        :class="modelValue === index ? 'is-active' : ''"
         @click="change_step(index)"
       >
         <a>
@@ -29,20 +29,20 @@ export interface Step {
 @Options({
   props: {
     steps: Array,
-    current: Number,
+    modelValue: Number,
   },
-  emits: ["update:current"],
+  emits: ["update:modelValue"],
 })
 export default class extends Vue {
   private steps!: Step[];
-  private current!: number;
+  private modelValue!: number;
 
   private change_step(next_step: number) {
-    if (next_step === this.current) {
+    if (next_step === this.modelValue) {
       return;
     }
 
-    this.$emit("update:current", next_step);
+    this.$emit("update:modelValue", next_step);
   }
 }
 </script>

ui/src/components/DoorMapEditor.vue

@@ -2,7 +2,7 @@
   <div class="box">
     <p class="title is-4">Türchen bearbeiten</p>
 
-    <BulmaBreadcrumb :steps="steps" v-model:current="current_step" />
+    <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
 
     <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
     <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
@@ -14,13 +14,13 @@
 import { Vue, Options } from "vue-class-component";
 import { Rectangle } from "./rects/rectangles";
 
-import BulmaBreadcrumb, { Step } from "./BulmaBreadcrumb.vue";
+import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
 import DoorPlacer from "./door_map/DoorPlacer.vue";
 import DoorChooser from "./door_map/DoorChooser.vue";
 
 @Options({
   components: {
-    BulmaBreadcrumb,
+    BulmaBreadcrumbs,
     DoorPlacer,
     DoorChooser,
   },