Используйте резервное содержимое слота только при выполнении условия

Question

Я хотел бы знать, есть ли способ сделать то, что я пытаюсь описать ниже:

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

При использовании этого компонента в другом месте я хотел бы иметь следующее поведение:

<TheComponent>
  <template v-slot:name="{ data }">
    <fallback v-if="condition(data)"/>
  </template>
</TheComponent>

Я полагаю fallbackтега (или похожего) не существует (по крайней мере, я его не нашел...). Полагаю, я ошибаюсь, но не могу найти решения своей проблемы.

Дело в том, что я не могу изменить TheComponent поскольку он предоставляется внешней библиотекой, и я не хочу воссоздавать контент.

На самом деле, если это может помочь, я пытаюсь скрыть кнопку расширения, чтобы предотвратить расширение строки в Vuetify. data-table, в зависимости от того, есть ли в строке что-то показывать или нет в развернутой части. Итак, я хотел бы написать что-то вроде:

<v-data-table :items="items" show-expand ...>
  <template v-slot:item.data-table-expand="{ item }">
    <!-- Here I want the default behavior only if my item respects some condition -->
    <fallback v-if="condition(item)"/>
    <!-- Otherwise, I don't want to display the button that expands the row -->
  </template>
</v-data-table>

Спасибо заранее за вашу помощь.

Answer 1

После большого количества поисков в Google я не думаю, что это возможно. ИМХО, лучше всего воспроизвести содержимое слота по умолчанию, которое Vuetify генерирует, и поместить его в свое собственное состояние (v-if="item.description" в моем примере):

    <v-data-table :headers="headers" :items="people" show-expand>
      <template v-slot:expanded-item="{ item, headers }">
        <td :colspan="headers.length">{{ item.description }}</td>
      </template>
      <template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
        <v-icon
          v-if="item.description"
          :class="['v-data-table__expand-icon', { 'v-data-table__expand-icon--active': isExpanded }]"
          @click.stop="expand(!isExpanded)"
        >$expand</v-icon>
      </template>
    </v-data-table>

Я понимаю, что это решение хрупкое и может сломаться в любое время, когда Vuetify что-то изменит, но я не думаю, что сейчас есть лучшее решение...

пример