carmellablick

To make a simple Vue custom select component, you can follow these steps: 1. Create a new Vue component and import Vue:

javascript

<template>
  <div class="select-container">
    <select v-model="selected" @change="$emit('select', selected)">
      <option v-for="(option, index) in options" :key="index" :value="option">
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>

import Vue from 'vue'

export default Vue.extend({
  name: 'CustomSelect',
  props: {
    options: {
      type: Array,
      required: true
    },
    selected: {
      type: String,
      default: ''
    }
  }
})
</script>

<style scoped>
  .select-container {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 0;
    border: 1px solid #ced4da;
    background-color: #fff;
    cursor: pointer;
  }
</style>

The component has two props, options and selected. options is an array of options to be displayed in the select dropdown, and selected is the currently selected option. By default, selected is set to an empty string.

The template contains a select element that loops through the options array using a v-for directive to generate the option elements. The value attribute of each option is set to the current option in the loop, and the text content of each option is set to the current option as well.

The v-model directive binds the selected prop to the select element, so when an option is selected, the selected prop is updated.

When an option is selected, the @change event is emitted with the value of the selected option as the argument. This allows the parent component to listen for the event and update its state accordingly.

The CSS styles give the select dropdown a clean and modern look, with a custom arrow to indicate that it is a dropdown.

To use the component, import it into the parent component and add it to the template:

javascript

<template>
  <div>
    <custom-select :options="options" :selected="selected" @select="onSelect"></custom-select>
  </div>
</template>

<script>
import CustomSelect from './CustomSelect.vue'

export default {
  name: 'ParentComponent',
  components: {
    CustomSelect
  },
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3'],
  selected: ''
    }
  },
  methods: {
    onSelect(selected) {
      this.selected = selected
    }
  }
}
</script>

The ParentComponent component sets the options and selected data properties and listens for the select event emitted by the CustomSelect component. When an option is selected, the onSelect method updates the selected property with the selected value.

That's it! You now have a simple Vue custom select component that can be used in any Vue Storefront services for the app.