edit: audioData est mtn const reactive() et playlist editor fonctionne coté client

admin/components/PlaylistEditor.vue

@@ -17,9 +17,10 @@
         <p>&emsp; Artiste &emsp;&emsp;&ensp; &rarr;</p>
         <input type="text" name="songArtist" v-model="artist">
       </div>
+      <p v-show="editingSong" id="note">Note : Laisser vide pour conserver le fichier ↘</p>
       <div class="inputDiv" id="src">
         <p>&emsp; Fichier MP3 &ensp; &rarr;</p>
-        <input type="file" name="songFile" ref="audioFile" @change="loadFile">
+        <input type="file" name="songFile" ref="audioFile" @change="modifyFile">
       </div>
       <button type="button" name="saveChanges" class="textBtnStyle" @click="savePlaylist" :class="{alert: playlistAlertActive}">SAUVEGARDER !</button>
     </div>
@@ -108,6 +109,15 @@
         color: var(--back-color);
         background-color: var(--main-color);
       }
+            #note{
+              width: 66%;
+              font-family: 'velvelyne';
+              font-weight: normal;
+              font-size: 13.12px;
+              color: var(--main-color);
+              margin: 0;
+              text-align: right;
+            }
 
             .inputDiv{
               display: flex;
@@ -251,13 +261,12 @@
           src: null
         },
         editingSong: null,
-        fileInput: null
+        selectedInput: null
       }
     },
     computed: {
       displayedPlaylists(){
-        let list = loadAudioData()
-        return list
+        return loadAudioData
       },
       playlistPannel(){
         return pannelStatusList.playlist;
@@ -286,7 +295,6 @@
       backToDefaultPlaylist(){
         this.track = this.playlistDefault.track;
         this.artist = this.playlistDefault.artist;
-        this.src = this.playlistDefault.src;
         this.editingSong = null;
         this.newSongText = 'Nouveau Son';
       },
@@ -296,16 +304,16 @@
           artist: this.artist,
           src: this.src
         }
-
+        console.log('created or modified entry :', entry)
         return entry
       },
       savePlaylist(){
         let entry = this.createListEntry();
         if(this.editingSong){
           Object.assign(this.editingSong, {
-            title: this.title,
-            href: this.href,
-            desc: this.desc
+            track: this.track,
+            artist: this.artist,
+            src: this.src
           })
         } else {
           this.displayedPlaylists.push(entry);
@@ -324,6 +332,7 @@
         this.track = obj.track;
         this.artist = obj.artist;
         this.src = obj.src;
+
         this.newSongText = 'Éditer les infos'
         this.toggleNewPlaylist();
       },
@@ -336,10 +345,16 @@
           this.eventAlertActive = false;
           this.submitPlaylistText = 'SAUVEGARDER';
         }, 1610)
+      },
+      modifyFile(){
+        if (this.selectedInput.files[0]){
+          this.src = this.selectedInput.files[0];
+        }
       }
     },
     mounted(){
-      this.fileInput = this.$refs.audioFile;
+      this.selectedInput = this.$refs.audioFile;
+      console.log(this.selectedInput)
       watch( () => this.playlistPannel, () => {
         if(!this.playlistPannel){
           this.newSong = false;