ボタン要素をジグザクに二行で表示する

Question

前提・実現したいこと

①ボタン要素をジグザクに二行で表示し、x軸方向にスクロールしたいと考えています。
②それらのボタンが押されているものを保持し、
③押されていたら、色付けする

文章で説明しにくいので画像とCodePenを載せます。

自分のCodePen
https://codepen.io/momochi/pen/LYZBLBZ

以上、３点が機能すれば、大きく仕様を変えても構いません。
例えば、
①を実現するために、配列を無理やり二重配列にしていますが、一重のまま①ができれば、その他はうまく機能すると思います。

result_list:[["a","b"],["c","d"],["e","f"],["g","h"],["i","j"]]
↓
result_list:["a","b","c","d","e","f","g","h","i","j"]

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

発生している問題・エラーメッセージ

①、②は無理やりですが、自力でできました。
③が出来なくて詰まっています。

v-btn-toggleでcolor="deep-purple accent-3"のようにすると選択されているものが色付けされるのですが、
①を実現するために無理やり２要素づつdivで囲っているので、うまく機能しないようです。
（参考）
・公式リファレンス　https://vuetifyjs.com/en/components/button-groups/#usage
・公式CodePen　https://codepen.io/pen/?editors=1010
（CodePenのTextOptionsのように色付けされてほしいです）

<div id="app">
  <v-app>
    <div class="forecast-outline mt-3">
      <v-btn-toggle v-model="selected" multiple group>
        <div
          v-for="two_items in result_list"
          :key="`${two_items[0]}_${two_items[1]}`"
        >
          <v-btn
            v-for="item in two_items"
            :key="item"
            x-large
            height="68"
            class="mb-2 mr-2 text-center align-center forecast-card"
            :value="item"
          >
            {{item}}
          </v-btn>
        </div>
      </v-btn-toggle>
    </div>
    {{selected}}
  </v-app>
</div>

.forecast-outline {
  width: 90%;
  height: 160px;
  margin: auto;
  outline: dashed 2px black;
  padding: 8px;
  overflow-x: scroll;

  display: flex;
}
.forecast-inlinebox > div{
  /* forecast-cardの横幅 + 隙間（ml-2(8px)） */
  width: 208px;
}
.forecast-card{
  width: 200px;
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      selected:[],
      result_list:[["a","b"],["c","d"],["e","f"],["g","h"],["i","j"]]
    }
  },
  methods:{
  }
})

Answer 1

2つほどアプローチが考えられるので、それぞれ例を示します。
参考になれば幸いです。

1 v-btn-toggle のcolorが動作するように構造を整理し、ジグザグの折返しはcssのflexで対応する

https://codepen.io/daikiojm/pen/rNLZjKb?editors=1111

2 v-btn-toggle のcolorではなく、v-btnのcolorを直接使う

https://codepen.io/daikiojm/pen/QWEVpMP

Comments

[momochi]

２例もあげてくださり、ありがとうございます！！

1はやろうとして悩んでいたことを実現してくださっています！！
flexの使い方がよくわからず諦めていたので、大変勉強になりました。

２の私のやり方に合わせた対応策も参考になりました。

1のほうが構造的にもシンプルなので、１に置き換えようと思います。
ありがとうございます。