Как не дублировать компонент с похожими данными?

Question

[kot98]

Есть два селекта:

...
    <el-select
      v-if="props.secondType"
      v-model="modelText"
      placeholder="Выберите предмет"
      @change="changeVal"
    >
      <el-option
        v-for="item in props.secondTypeItems"
        :key="item.id"
        :label="item.value"
        :value="item.id"
      >
        {{ item.value }}
      </el-option>
    </el-select>
    <el-select
      v-else="props.thirdType"
      v-model="modelText"
      placeholder="Выберите активность"
      @change="changeVal"
    >
      <el-option
        v-for="event in props.thirdTypeEvents"
        :key="event.desc"
        :label="event.name"
        :value="event.desc"
      >
        {{ event.name }}
      </el-option>
    </el-select>
...

Как избавиться от дублируемости кода и сделать все в одном селекте?

Answer 1

[Aetae]

const options = computed(() => {
  if (props.secondType) 
    return props.secondTypeItems.map(({ id, value}) => ({
      label: value,
      value: id 
    }));

  if (props.thirdType) 
    return props.thirdTypeEvents.map(({ desc, name }) => ({
      label: name,
      value: desc 
    }));

  // ...

  return [];
});

<el-select
      v-model="modelText"
      placeholder="Выберите предмет"
      @change="changeVal"
    >
      <el-option
        v-for="{ label, value} in options"
        :key="value"
        :label="label"
        :value="value"
      >
        {{ label }}
      </el-option>
    </el-select>

Answer 2

[Владимир Коротенко]

Да в общем то ни как
у вас есть предмет и активность, как я понимаю активность зависит от предмета.
Так что формулируйте четче чего хотите.
Кстати есть такой антипаттерн когда заказчик разбирается в коде и приходит со своим решением и просит его доработать. Хотя лучшее решение это представить бизнес задачу и слушаться профи