update code

src/components/artist-information/personal-information/PersonalInformation.ts

@@ -137,6 +137,10 @@ export default defineComponent({
           'artist.artistInformation.validateMessages.requireArtistLevel'
         ),
     ];
+    const deleteAvatar = ()=>{
+      console.log('object');
+      context.emit('deleteAvatar')
+    }
     return {
       artistCodeRules,
       fullNameRules,
@@ -154,6 +158,7 @@ export default defineComponent({
       upload,
       uploadBanner,
       selectedFile,
+      deleteAvatar
     };
   },
   emits: [
@@ -177,6 +182,7 @@ export default defineComponent({
     'update:artistLevel',
     'update:status',
     'addNewArtist',
-    'SetAvatar'
+    'SetAvatar',
+    'deleteAvatar'
   ],
 });

src/components/artist-information/personal-information/index.vue

@@ -7,7 +7,13 @@
         <div class="col-8 flex flex-center">
           <div>
             <q-card style="margin-bottom: 8px" v-if="avatar !== null">
-              <q-img :src="avatar" style="height: 180px; width: 135px"></q-img>
+              <q-img :src="avatar" style="height: 180px; width: 135px"> </q-img>
+              <q-icon
+                name="mdi-close-circle"
+                color="red"
+                style="position: absolute; right: 0; font-size: 18px"
+                @click="deleteAvatar"
+              ></q-icon>
             </q-card>
             <q-card v-else style="margin-bottom: 8px">
               <q-img

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -59,6 +59,7 @@
               :artist-level-options="artistLevelOptions"
               :work-options="workOptions"
               @SetAvatar="setAvatar($event)"
+              @deleteAvatar="deleteAvatar"
             ></PersonalInformation>
           </q-tab-panel>
           <q-tab-panel name="vabAccount">

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -52,7 +52,7 @@ export default defineComponent({
     UploadEmbedDialog,
   },
  
-  setup() {
+  setup(_, context) {
     const route = useRoute();
     const tab = ref('information');
 
@@ -370,6 +370,9 @@ export default defineComponent({
         }
       } catch (error) {}
     };
+   const deleteAvatar=()=>{
+      avatar.value = null
+    }
     onMounted(() => {
       void getInformationArtist();
       void getFieldOptions();
@@ -450,7 +453,8 @@ export default defineComponent({
       getTypeCardOptions,
       rowDataAccBank,
       avatar,
-      setAvatar
+      setAvatar,
+      deleteAvatar
     };
   },
 });