<template>
  <div>
    <select v-model="selectedCategory">
      <option value="">All</option>
      <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
    </select>

    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      categories: [
        { id: 1, name: 'Category 1' },
        { id: 2, name: 'Category 2' },
        { id: 3, name: 'Category 3' }
      ],
      products: [
        { id: 1, name: 'Product 1', price: 10, categoryId: 1 },
        { id: 2, name: 'Product 2', price: 15, categoryId: 2 },
        { id: 3, name: 'Product 3', price: 20, categoryId: 3 }
      ]
    };
  },
  computed: {
    filteredProducts() {
      if (this.selectedCategory) {
        return this.products.filter(product => product.categoryId === this.selectedCategory);
      } else {
        return this.products;
      }
    }
  }
};
</script>