<div
  v-for="dt in documentTypes"
  :key="dt.code"
  class="column-item"
  :class="{ selected: selectedDocType === dt.label }"
  @click="selectDocType(dt.label)"
>
  <span class="item-name">{{ dt.label }}</span>
  <span class="item-count">{{ docTypeStats[dt.label] || 0 }}</span>
</div>

2. 書類タイプ切り替え時に状態をクリア

selectDocType関数にelse句を追加し、ルールがない場合は選択状態をクリア：

function selectDocType(type: string) {
  selectedDocType.value = type
  selectedDirection.value = '支出'
  nextTick(() => {
    if (accountList.value.length > 0) {
      selectAccount(accountList.value[0].name)
    } else {
      // ルールがない場合は選択状態をクリア
      selectedAccount.value = null
      selectedSubAccount.value = null
      selectedTaxType.value = null
      selectedRule.value = null
      updateQueryParams()
    }
  })
}

3. 領収書・レシートの場合は収支区分カラムを非表示

needsDirectionColumn computedを追加し、条件付きで表示：

// 領収書・レシートは支出のみなので収支区分カラム不要
const needsDirectionColumn = computed(() => {
  return selectedDocType.value !== '領収書（領収書・レシート）'
})

テンプレートでv-ifを使用：

<!-- 2列目: 収支区分（領収書・レシート以外の場合のみ表示） -->
<div v-if="needsDirectionColumn" class="column">
  ...
</div>

4. ルール詳細のメッセージを改善

ルールが選択されていない場合のメッセージを「税区分を選択してください」から「ルールなし」に変更：

<template v-else>
  <div class="column-header">ルール詳細</div>
  <div class="column-content">
    <div class="empty-message">ルールなし</div>
  </div>
</template>

結果

After: 領収書・レシートを選択した状態（収支区分カラムが非表示、件数0が表示）

書類タイプの右側に件数が表示される（領収書0、クレジットカード明細68、銀行明細0）
領収書・レシートを選択すると収支区分カラムが自動的に非表示になる
ルールがない書類タイプでは「ルールなし」と表示され、ルール詳細もクリアされる

まとめ

ミラーカラムUIでは、書類タイプによって必要なカラムが異なる場合がある。今回のようにcomputedで条件を定義し、v-ifで表示制御することで、ユーザーに不要な選択肢を見せずに済む。

また、件数表示は「クリックする価値があるか」を事前に判断できるため、UX向上に効果的。0件とわかれば、わざわざクリックする必要がない。