조건이 충족되는 경우에만 슬롯의 폴백 콘텐츠 사용

조건이 충족되는 경우에만 슬롯의 폴백 콘텐츠 사용

아래에 설명하려는 방법을 알고 싶습니다.

슬롯이 있는 컴포넌트가 있고 폴백 콘텐츠가 정의되어 있다고 가정합니다.

이 컴포넌트를 다른 곳에서 사용할 때 다음과 같은 동작을 하고 싶습니다.

<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>

잘 부탁드립니다.

꽤 많은 "검색"을 한 후로는 불가능할 것 같아요.IMHO는 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가 무언가를 바꿀 때마다 고장날 수 있다는 것은 알지만, 지금은 더 나은 해결책이 없다고 생각합니다.

예

언급URL : https://stackoverflow.com/questions/59379228/use-fallback-content-of-slot-only-if-condition-is-met