for文で表示させた数個のボタンから、クリック前 かつ 先頭のボタンのみに常に文言を追加表示したい。

Question

前提・実現したいこと

v-forでボタンを数個、左から並べて表示し、クリック後と前でイベントを分けています。
①クリックされていない状態のボタンの中から
②一番左のボタンのみ
に、ボタンの下に文言を表示したいです。

例えば三つボタン並んでいるとして、ユーザはそれを順番関係なしにクリックできます。クリックするとそのボタンは clicked になります。
[１][２][３]とボタンがあるとした場合、
最初は１の下に文言。１をクリック後は２の下に文言。１ではなく２ or ３をクリックし場合文言は１の下のまま。
というのを実現したいです。

該当のソースコード

<div>
 <btn
  v-for="(hoge, index) in hoges"
  :key="hoge.id"
  role="button"
  class="btn"
  @click="clicked(index)"
 >
  <template v-if="!clicked">
   <div>
    <p>これをボタンの下に表示したい<p>
   </div>
 </btn>
</div>

何ができないのか

現在はクリック前全てのボタンの下に文言が表示されています。
全てのボタンの下ではなく、クリック前かつ一番左のボタンのみの下に文言を出したいのですが、どう記述すればよいのかわからず困っています。

よろしくお願い致します。

Answer 1

仕様としてはclickedになっていない最小インデックスの要素に文言を表示したいという認識でいいでしょうか？
hogeのデータがどうなっているかが分からないのですが、以下のような形ではどうでしょうか。

<template>
 <btn
  v-for="(hoge, index) in hoges"
  :key="hoge.id"
  role="button"
  class="btn"
  @click="clicked(index)"
 >
  <template v-if="unClickedIndex === index">
   <div>
    <p>これをボタンの下に表示したい<p>
   </div>
  </template>
 </btn>
</template>

<script>
export default {
  data() {
    return {
      hoges: []
    }
  },
  computed: {
    unClickedIndex() {
      this.hoges.findIndex(el => el.clicked !== true)
    }
  }
}
</script>