file.vue

<script setup>
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  userId: { type: String, required: true }
})

// Destructure userId from props for convenience
const { userId } = props

// Read the saved theme so we can apply it
const theme = localStorage.getItem(`theme_${userId}`)

const query = ref('')
const products = ref([])

onMounted(() => {
  const handler = () => {
    console.log('Window resized, current query:', query.value)
  }
  window.addEventListener('resize', handler)
})

watch(query, async (newQuery) => {
  const res = await fetch(`/api/products?q=${newQuery}`)
  const data = await res.json()
  products.value = data
})

function resizeAll() {
  products.value.forEach((_, i) => {
    const el = document.getElementById(`product-${i}`)
    el.style.width = '100px'
    const h = el.offsetHeight
    el.style.height = `${h * 2}px`
  })
}

function selectProduct(p) {
  p.selected = true
}
</script>

<template>
  <div :class="theme">
    <input v-model="query" placeholder="Search products..." />
    <div
      v-for="(p, i) in products"
      :key="i"
      :id="`product-${i}`"
      @click="selectProduct(p)"
    >
      <span v-html="p.name"></span>
    </div>
  </div>
</template>