Fix v-if with v-for

front/.eslintrc.js

@@ -24,7 +24,6 @@ module.exports = {
   ],
   rules: {
     'vue/no-v-html': 'off', // TODO: tackle this properly
-    'vue/no-use-v-if-with-v-for': 'off',
 
     // NOTE: Handled by typescript
     'no-undef': 'off',
@@ -42,6 +41,9 @@ module.exports = {
 
     // TODO (wvffle): Migration to pinia
     //                Vuex 3 store does not have types defined, hence we use `any`
-    '@typescript-eslint/no-explicit-any': 'off'
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    // TODO (wvffle): Migrate to <script setup>
+    'vue/require-explicit-emits': 'off'
   }
 }

front/src/components/auth/Plugin.vue

@@ -72,10 +72,8 @@
         </translate>
       </div>
     </div>
-    <template
-      v-for="(field, key) in plugin.conf"
-      v-if="plugin.conf && plugin.conf.length > 0"
-    >
+    <template v-if="plugin.conf?.length > 0">
+      <template v-for="(field, key) in plugin.conf">
         <div
           v-if="field.type === 'text'"
           :key="key"
@@ -142,6 +140,7 @@
           />
         </div>
       </template>
+    </template>
     <button
       type="submit"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"

front/src/components/library/EditCard.vue

@@ -97,8 +97,7 @@
               </template>
               <template v-else>
                 <span
-                  v-for="(part, key) in field.diff"
-                  v-if="!part.added"
+                  v-for="(part, key) in field.diff.filter(p => !p.added)"
                   :key="key"
                   :class="['diff', {removed: part.removed}]"
                 >
@@ -125,8 +124,7 @@
               </template>
               <template v-else>
                 <span
-                  v-for="(part, key) in field.diff"
-                  v-if="!part.removed"
+                  v-for="(part, key) in field.diff.filter(p => !p.removed)"
                   :key="key"
                   :class="['diff', {added: part.added}]"
                 >

front/src/components/library/EditForm.vue

@@ -95,9 +95,9 @@
           You don't have the permission to edit this object, but you can suggest changes. Once submitted, suggestions will be reviewed before approval.
         </translate>
       </div>
+      <template v-if="values">
         <div
           v-for="fieldConfig in config.fields"
-        v-if="values"
           :key="fieldConfig.id"
           class="ui field"
         >
@@ -197,6 +197,7 @@
             </button>
           </div>
         </div>
+      </template>
       <div class="field">
         <label for="summary"><translate translate-context="*/*/*">Summary (optional)</translate></label>
         <textarea

front/src/embed/EmbedFrame.vue

@@ -189,8 +189,7 @@
       <table class="queue">
         <tbody>
           <tr
-            v-for="(track, index) in tracks"
-            v-if="track.sources.length > 0"
+            v-for="(track, index) in filteredTracks"
             :id="'queue-item-' + index"
             :key="index"
             role="button"
@@ -249,6 +248,7 @@ import axios from 'axios'
 import Logo from '~/components/Logo.vue'
 import updateQueryString from '~/composables/updateQueryString'
 import time from '~/utils/time'
+import { reactive, computed } from 'vue'
 
 function getURLParams () {
   let match
@@ -265,6 +265,12 @@ function getURLParams () {
 export default {
   name: 'App',
   components: { Logo },
+  setup () {
+    const tracks = reactive([])
+    const filteredTracks = computed(() => tracks.filter(track => track.sources.length > 0))
+
+    return { tracks, filteredTracks }
+  },
   data () {
     return {
       time,
@@ -273,7 +279,6 @@ export default {
       error: null,
       type: null,
       id: null,
-      tracks: [],
       autoplay: false,
       url: null,
       isLoading: true,
@@ -404,26 +409,25 @@ export default {
       })
     },
     fetchTrack (id) {
-      const self = this
       const url = `${this.baseUrl}/api/v1/tracks/${id}/`
-      axios.get(url).then(response => {
-        self.tracks = self.parseTracks([response.data])
-        self.isLoading = false
+      axios.get(url).then(() => {
+        this.tracks = this.parseTracks([response.data])
+        this.isLoading = false
       }).catch(error => {
         if (error.response) {
           if (error.response.status === 404) {
-            self.error = 'server_not_found'
+            this.error = 'server_not_found'
           } else if (error.response.status === 403) {
-            self.error = 'server_requires_auth'
+            this.error = 'server_requires_auth'
           } else if (error.response.status === 500) {
-            self.error = 'server_error'
+            this.error = 'server_error'
           } else {
-            self.error = 'server_unknown_error'
+            this.error = 'server_unknown_error'
           }
         } else {
-          self.error = 'server_unknown_error'
+          this.error = 'server_unknown_error'
         }
-        self.isLoading = false
+        this.isLoading = false
       })
     },
     fetchTracks (filters, path) {