update无法新建房间

src/components/RTC/dialog/createdRoom.vue

@@ -13,7 +13,7 @@
             type="text"
             :placeholder="role == 'leader' ? $t('common.leadernickName') : $t('common.inputnickName')"
           />
-          <span class="limitNum">{{ userName.length }}/20</span>
+          <span class="limitNum">{{  userName && userName.length }}/20</span>
         </div>
         <!-- <div v-if="role!='customer'" class="mode_btn">
           <div @click="chooseMode(i.mode)" v-for="i,index in modeList" :key="index" :class="{ active: mode==i.mode }" class="mode">{{i.title}}</div>
@@ -36,8 +36,13 @@ const { t } = useI18n({ useScope: "global" });
 import { Dialog } from "@/global_components/";
 import browser from "@/utils/browser";
 import { useStore } from "vuex";
+import { computed, ref } from "vue";
 
 export default {
+  setup(props){
+    const userName = ref('')
+    return {userName}
+  },
   data() {
     return {
       role: browser.getURLParam("role") || "leader",
@@ -53,7 +58,6 @@ export default {
         },
       ],
       store: useStore(),
-      userName: "",
       roomId: browser.getURLParam("roomId"),
       $t: this.t,
     };