From e61f6bf624534f14d3b14e8fcdff9f98bcde94b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Mon, 17 Jun 2024 22:00:06 +0200
Subject: [PATCH] fix mount reactiveness, #128.

---
 client/src/App.vue                    | 2 +-
 client/src/components/RoomsCreate.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index e0a7ce0..996969e 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component } from 'vue-property-decorator'
 import Home from './views/Home.vue'
 
 @Component({
diff --git a/client/src/components/RoomsCreate.vue b/client/src/components/RoomsCreate.vue
index 3f11dde..836ce86 100644
--- a/client/src/components/RoomsCreate.vue
+++ b/client/src/components/RoomsCreate.vue
@@ -225,7 +225,7 @@
             <h2> Environment variables </h2>
             <v-btn @click="addEnv" icon color="green"><v-icon>mdi-plus</v-icon></v-btn>
           </v-row>
-          <v-row align="center" v-for="({ key, val }, index) in envList" :key="index">
+          <v-row align="center" v-for="({ key, val }, index) in envList" :key="'env-'+index">
             <v-col class="py-0">
               <v-text-field
                 label="Key"
@@ -251,7 +251,7 @@
               <h2> Mounts </h2>
               <v-btn @click="addMount" icon color="green"><v-icon>mdi-plus</v-icon></v-btn>
           </v-row>
-          <v-row align="center" class="mb-2" v-for="({ type, host_path, container_path }, index) in data.mounts" :key="index">
+          <v-row align="center" class="mb-2" v-for="({ type, host_path, container_path }, index) in data.mounts" :key="'mount-'+index">
             <v-col class="py-0" cols="2">
               <v-select
                 label="Type"
@@ -726,13 +726,13 @@ export default class RoomsCreate extends Vue {
     } else {
       mounts[index] = data
     }
-    Vue.set(this.data, 'mounts', mounts)
+    Vue.set(this.data, 'mounts', [ ...mounts])
   }
 
   delMount(index: number) {
     const mounts = this.data.mounts || []
     mounts.splice(index, 1)
-    Vue.set(this.data, 'mounts', mounts)
+    Vue.set(this.data, 'mounts', [ ...mounts])
   }
 
   async CreateAndStart() {