fix room create console issues.

client/src/components/RoomsCreate.vue

@@ -16,7 +16,7 @@
               v-model="data.name"
               :rules="[ rules.minLen(2), rules.containerNameStart, rules.containerName ]"
               autocomplete="off"
-              :hint="!data.name && '... using random name'"
+              :hint="!data.name ? '... using random name' : ''"
               persistent-hint
             ></v-text-field>
           </v-col>
@@ -38,7 +38,7 @@
               :type="showUserPass ? 'text' : 'password'"
               @click:append="showUserPass = !showUserPass"
               autocomplete="off"
-              :hint="!data.user_pass && '... using random password'"
+              :hint="!data.user_pass ? '... using random password' : ''"
               persistent-hint
             ></v-text-field>
           </v-col>
@@ -50,7 +50,7 @@
               :type="showAdminPass ? 'text' : 'password'"
               @click:append="showAdminPass = !showAdminPass"
               autocomplete="off"
-              :hint="!data.admin_pass && '... using random password'"
+              :hint="!data.admin_pass ? '... using random password' : ''"
               persistent-hint
             ></v-text-field>
           </v-col>
@@ -249,7 +249,7 @@
           </v-row>
           <v-row align="center" no-gutters class="my-3">
               <h2> Mounts </h2>
-              <v-btn @click="data.mounts = [ ...data.mounts, { type: storageEnabled ? 'private' : 'public', host_path: '', container_path: '' }]" icon color="green"><v-icon>mdi-plus</v-icon></v-btn>
+              <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-col class="py-0" cols="2">
@@ -257,14 +257,14 @@
                 label="Type"
                 :items="mountTypes"
                 :value="type"
-                @input="$set(data.mounts, index, { type: $event, host_path, container_path })"
+                @input="setMount(index, { type: $event, host_path, container_path })"
               ></v-select>
             </v-col>
             <v-col class="py-0 pl-0">
               <v-text-field
                 label="Host path"
                 :value="host_path"
-                @input="$set(data.mounts, index, { type, host_path: $event, container_path })"
+                @input="setMount(index, { type, host_path: $event, container_path })"
                 :rules="[ rules.absolutePath ]"
                 autocomplete="off"
               ></v-text-field>
@@ -274,16 +274,16 @@
               <v-text-field
                 label="Container path"
                 :value="container_path"
-                @input="$set(data.mounts, index, { type, host_path, container_path: $event})"
+                @input="setMount(index, { type, host_path, container_path: $event})"
                 :rules="[ rules.absolutePath ]"
                 autocomplete="off"
               ></v-text-field>
             </v-col>
             <div>
-              <v-btn @click="$delete(data.mounts, index)" icon color="red"><v-icon>mdi-close</v-icon></v-btn>
+              <v-btn @click="delMount(index)" icon color="red"><v-icon>mdi-close</v-icon></v-btn>
             </div>
           </v-row>
-          <v-row align="center" no-gutters v-if="data.mounts.length > 0">
+          <v-row align="center" no-gutters v-if="data.mounts && data.mounts.length > 0">
             <v-alert
               border="left"
               type="warning"
@@ -305,7 +305,7 @@
           <v-row align="center" no-gutters>
             <h2> Resources </h2>
           </v-row>
-          <v-row align="center">
+          <v-row align="center" v-if="data.resources">
             <v-col>
               <v-slider
                 v-model="data.resources.memory"
@@ -343,7 +343,7 @@
               </v-slider>
             </v-col>
           </v-row>
-          <v-row align="center">
+          <v-row align="center" v-if="data.resources">
             <v-col>
               <v-slider
                 v-model="data.resources.shm_size"
@@ -372,7 +372,7 @@
             <div style="margin-left: 41px;"><i>Nvidia docker runtime is required.</i></div>
             </v-col>
           </v-row>
-          <v-row align="center">
+          <v-row align="center" v-if="data.resources">
             <v-col class="pt-0">
               <v-combobox class="pt-0"
                 label="Devices"
@@ -553,6 +553,7 @@ import {
   BrowserPolicyContent,
   BrowserPolicyExtension,
   BrowserPolicyTypeEnum,
+  RoomMount,
   RoomMountTypeEnum,
 } from '@/api/index'
 
@@ -713,6 +714,27 @@ export default class RoomsCreate extends Vue {
     Vue.delete(this.envList, index)
   }
 
+  addMount() {
+    const type = this.storageEnabled ? RoomMountTypeEnum.private : RoomMountTypeEnum.public
+    Vue.set(this.data, 'mounts', [ ...(this.data.mounts || []), { type, host_path: '', container_path: '' } ])
+  }
+
+  setMount(index: number, data: RoomMount) {
+    let mounts = this.data.mounts || []
+    if (index >= mounts.length) {
+      mounts = [ ...mounts, data ]
+    } else {
+      mounts[index] = data
+    }
+    Vue.set(this.data, 'mounts', mounts)
+  }
+
+  delMount(index: number) {
+    const mounts = this.data.mounts || []
+    mounts.splice(index, 1)
+    Vue.set(this.data, 'mounts', mounts)
+  }
+
   async CreateAndStart() {
     this.loadingWithStart = true
     try {