select : load first image

src/components/Selector.vue

@@ -52,25 +52,38 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useDialogStore } from '../stores/dialog';
 
-const { items, label, isCompareModeEnabled } = defineProps({
+// Props
+const { items, label, isCompareModeEnabled, index } = defineProps({
   label: String,
   items: Array,
   isCompareModeEnabled: {
     type: Boolean,
     default: false,
   },
+  index: Number,
 });
 
+// Emitters
 const emit = defineEmits(['update:selectedItems']);
 
+// Variables
 const currentValue = ref(null);
 
+// Stores
 const { activeTracks } = storeToRefs(useDialogStore());
 
+// Hooks
+onBeforeMount(() => {
+  if (index === 0) {
+    currentValue.value = items[0];
+  }
+});
+
+// Watchers
 watch(
   () => isCompareModeEnabled,
   (newValue) => {
@@ -94,6 +107,7 @@ watch(activeTracks, (newValue) => {
   }
 });
 
+// Functions
 function changeCurrent(item) {
   emit('update:selectedItems', item);
 }

src/components/project/virtual-sample/DynamicView.vue

@@ -3,11 +3,12 @@
     <header class="tracks-header | flex">
       <div class="tracks">
         <Selector
-          v-for="track in tracks"
+          v-for="(track, index) in tracks"
           :key="track.slug"
           :label="track.title"
           :items="track.variations"
           :isCompareModeEnabled="isCompareModeEnabled"
+          :index="index"
           @update:selectedItems="selectTrack"
         />
       </div>
@@ -67,8 +68,11 @@ const rawTracks = page.value.steps.find(
 ).files.dynamic;
 
 onBeforeMount(() => {
-  activeTracks.value = [rawTracks[Object.keys(rawTracks)[0]][0]];
+  const firstTrack = rawTracks[Object.keys(rawTracks)[0]];
+  const firstVariation = firstTrack[0];
+  activeTracks.value = [firstVariation];
 
+  // TO RE-ENABLE
   // if (route.hash.length > 0) {
   //   const trackToOpen = tracks.value.find(
   //     (track) => track.slug === route.hash.substring(1)