Vueドキュメントへの検索条件コンポーネントの実装

<template>
  <div class="search-box">
    <input type="text" v-model="searchText" @input="handleInput">
    <button @click="handleSubmit">Search</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleInput(event) {
      this.searchText = event.target.value;
    },
    handleSubmit() {
      this.$emit('search', this.searchText);
      this.searchText = '';
    }
  }
}
</script>

<style scoped>
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
input[type="text"] {
  width: 80%;
  padding: 5px;
  margin-right: 10px;
}
</style>

<template>
  <div class="selector-box">
    <div class="selector-item" v-for="(option, index) in options" :key="index">
      <label>{{ option.label }}</label>
      <select v-model="selectedOptions[option.name]" @change="handleSelectChange">
        <option v-for="(item, i) in option.items" :key="i" :value="item.value">{{ item.label }}</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    selectedOptions: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    handleSelectChange(event) {
      this.$emit('select', { [event.target.name]: event.target.value });
    }
  }
}
</script>

<style scoped>
.selector-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.selector-item {
  margin-right: 10px;
}
.selector-item label {
  margin-right: 5px;
}
</style>

<template>
  <div>
    <search-box @search="handleSearch" />
    <selector-box :options="selectorOptions" :selected-options="selectedOptions" @select="handleSelect" />
    <div class="result-box">
      <div v-for="(item, index) in searchResults" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue';
import SelectorBox from './SelectorBox.vue';

export default {
  components: {
    SearchBox,
    SelectorBox
  },
  data() {
    return {
      selectorOptions: [
        {
          name: 'category',
          label: 'Category',
          items: [
            { label: 'All', value: '' },
            { label: 'Phone', value: 'phone' },
            { label: 'Laptop', value: 'laptop' },
            { label: 'Tablet', value: 'tablet' }
          ]
        },
        {
          name: 'price',
          label: 'Price',
          items: [
            { label: 'All', value: '' },
            { label: '< $500', value: '0-500' },
            { label: ' $500-$1000', value: '500-1000' },
            { label: ' $1000<', value: '1000-999999' }
          ]
        }
      ],
      selectedOptions: {
        category: '',
        price: ''
      },
      searchResults: []
    }
  },
  methods: {
    handleSearch(searchText) {
      this.searchResults = ['Search by keyword: ' + searchText];
    },
    handleSelect(selectedData) {
      this.selectedOptions = Object.assign({}, this.selectedOptions, selectedData);
      this.searchResults = ['Select by: ' + Object.values(this.selectedOptions).filter(item => item !== '').join(', ')];
    }
  }
}
</script>

<style scoped>
.result-box {
  margin: 10px;
}
.result-box > div {
  margin: 5px;
  padding: 5px;
  background-color: #efefef;
  border-radius: 5px;
}
</style>