Компонент фильтров на vue?

Question

[fessss]

Подскажите, как лучше всего организовать данный компонент

Есть сам компонент (упрощу код):

<template>
  <toolbar>
    <slot names="fastFillters">
  </toolbar>
  <div class="filters">
    <slot names="filters">  
  </div>
</template>

Ну и место, где используется этот компонент

<filter-component :filters=filters>
    <template v-slot:fastFilters></template>
    <template v-slot:filters>
    // тут добавляем фильтры для slot filters
      <input type="text"/ name="name">
    </template>
</filter-component>

Я не хочу дублировать код в v-slot:fastFilters, но как мне сделать так, чтоб по определенному флагу на фильтрах он появлялся и в fastFilters (Дублировался)

чтоб по итогу была примерно такая конструкция?

<template>
  <toolbar>
    <input type="text" name="name">
  </toolbar>
  <div class="filters">
    <input type="text" name="name">
  </div>
</template>

Comments

[0xD34F]

Подскажите, как лучше всего организовать данный компонент

Лучше всего? Ну тогда встречный вопрос - как он у вас организован сейчас?

[fessss]

0xD34F, Сейчас +- также как я описал тут, просто без блока fastFilters. Теперь нужно сделать доработку, чтоб определенные фильтры были доступны в быстром доступе. Вот и не знаю как это правильно сделать.

[0xD34F]

не знаю как это правильно сделать

fessss, а неправильно как получается?

[fessss]

0xD34F, ну, у меня изначально был вариант, чтобы внутрь template filters засунуть ещё и template fastFiltets, но так нельзя делать как оказалось :)
Так же есть вариант с дублирование, что тоже не хорошо.
И вариант с использованием mixins, но не понимаю, как тогда маштабировать в данном случае. Если мне например нужны будут не все фильтры, а один из десяти.

Поэтому прошу подтолкнуть в верную сторону

Answer 1

[0xD34F]

не хочу дублировать код в v-slot:fastFilters, но как мне сделать так, чтоб по определенному флагу на фильтрах он появлялся и в fastFilters

Дублируйте не снаружи, а внутри - то есть, не контент, передаваемый в слот, а сам слот:

<toolbar>
  <slot name="fastFilters">
  <slot name="filters" v-if="а здесь ваш флаг">
</toolbar>
<div class="filters">
  <slot name="filters">
</div>

https://jsfiddle.net/qphgbv8k/