dynamize inspirations selector

src/components/inspirations/Selector.vue

@@ -10,8 +10,9 @@
     >
     <Select
       id="inspirations-select"
-      v-model="current.uri"
+      v-model="current"
       :options="all"
+      optionLabel="title"
       class="font-serif"
       data-icon="chevron-single-down"
       checkmark
@@ -29,13 +30,13 @@ const { all } = defineProps({
 const current = ref(all[0]);
 
 watch(current, (newValue) => {
-  console.log(newValue);
+  changeInspiration(newValue);
 });
 
 const emit = defineEmits(["update:currentInspiration"]);
 
-function changeInspiration(inspirationUri) {
-  emit("update:currentInspiration", inspirationUri);
+function changeInspiration(inspiration) {
+  emit("update:currentInspiration", inspiration);
 }
 </script>
 

src/views/Inspirations.vue

@@ -2,7 +2,10 @@
   <main>
     <h2 id="tabslist" class="sr-only">Inspirations</h2>
     <Tabs :tabs="tabs" @update:currentTab="changeTab" />
-    <Selector :all="page.inspirations" />
+    <Selector
+      :all="page.inspirations"
+      @update:currentInspiration="changeInspiration"
+    />
     <section :id="currentTab" class="inspiration">
       <Header :inspiration="currentInspiration" />
       <div class="masonry flow">
@@ -63,6 +66,11 @@ const favoriteImages = computed(() => {
 function changeTab(newValue) {
   currentTab.value = newValue;
 }
+
+function changeInspiration(newValue) {
+  console.log(newValue);
+  currentInspiration.value = newValue;
+}
 </script>
 
 <style scoped>