Как разбить на адекватные vue компоненты?

Question

[Анастасия]

Здравствуйте!

Я абсолютный новичок во Vue, и честно, не смогла найти ответ (или просто его видимо правильно сформулировать) в инете.

Имею два компонента (селекты html), один из них multiple, и они имеют разное значение по сути один — Array, а другой String, но их html-структура до безобразия одинаковая (нарушает принцип DRY)

<template>
  <label>
    {{ select.label }}
    <Error v-model="value"/>
    <select v-model="value" :multiple="select.isMultiple" :name="select.label">
      <option disabled value="">Выберете один</option>
      <option v-for="(option, i) in select.options" :key="i" :value="option">
      {{ option }}
      </option>
    </select>
  </label>
</template>

Подскажите, как правильнее "упаковать" select в компоненты.
Буду рада также полезным ссылкам и конструктивной критике.

Answer 1

[0xD34F]

Сделать общий компонент с параметром, который будет определять количество значений, доступных для выбора:

props: {
  multiple: Boolean,
  ...
},
computed: {
  placeholder() {
    return `Выберите ${this.multiple ? 'несколько значений' : 'одно значение'}`;
  },
  innerValue: {
    get() {
      const v = this.value;
      return this.multiple || this.options.includes(v) ? v : '';
    },
    set(val) {
      this.$emit('input', val);
    },
  },
},

<select v-model="innerValue" :multiple="multiple">
  <option disabled value="" v-text="placeholder"></option>
  <option v-for="n in options">{{ n }}</option>
</select>

https://jsfiddle.net/cgknyLd0/2/