【Vue.js】v-forでHTMLを展開するとき、classを動的に付与したい

前提・実現したいこと

電卓アプリをVue.jsの学習のため作っています。
v-forディレクティブを使ってclassを動的に付与したいと考えていますがうまくいきません。

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

現在次のように書いています。

HTML
1<li v-for="btn in buttons" :key="btn" v-bind:class="['inputBtn', 'input{btn.name}']">

.inputBtnクラスは無事当たっていて、２つ目の.input◯◯は当たっていないようです。
２つめのクラスさえ当たれば綺麗に並んでくれることを既にテスト済みです。
この書き方のどこが間違っていますか？
ドキュメントをあたりましたがわかりませんでした...

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="stylesheet" href="assets/reset.css">
8  <link rel="stylesheet" href="assets/style.css">
9  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
10  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
11  <title>Calculation App</title>
12</head>
13<body class="h-screen flex flex-col items-center bg-blue-100">
14  <a class="font-bold mt-16 mb-5 tracking-tight font-mono underline" target="_blank" rel="noopener noreferrer" href="https://github.com/moyongkexing/rpg-character-maker">CODE</a>
15  <div id="app">
16    <section class="displayContainer">
17      <p>{{ displayText }}</p>
18    </section>
19    
20    <section class="inputContainer">
21      <ul>
22        <!-- クラスの当て方が分からない -->
23        <li v-for="btn in buttons" :key="btn" v-bind:class="['inputBtn', 'input{btn.name}']">
24          {{ btn.value }}
25        </li>
26      </ul>
27      
28      <!-- 以下のように展開したい -->
29      <!-- <li class="inputBtn input0">0</li>
30      <li class="inputBtn input1">1</li>
31      <li class="inputBtn input2">2</li>
32      <li class="inputBtn input3">3</li>
33      <li class="inputBtn input4">4</li>
34      <li class="inputBtn input5">5</li>
35      <li class="inputBtn input6">6</li>
36      <li class="inputBtn input7">7</li>
37      <li class="inputBtn input8">8</li>
38      <li class="inputBtn input9">9</li>
39      <li class="inputBtn inputAddition">+</li>
40      <li class="inputBtn inputSubtraction">-</li>
41      <li class="inputBtn inputMultiplication">*</li>
42      <li class="inputBtn inputDivision">/</li>
43      <li class="inputBtn inputEnter">Enter</li>
44      <li class="inputBtn inputAllClear">AC</li> -->
45    </section>
46  </div>
47  <script type="module" src="./app.js"></script>
48</body>
49</html>

CSS
1.inputContainer {
2  display: grid;
3  grid-template-columns: repeat(4, 50px);
4  gap: 10px;
5  grid-template-rows: repeat(4, 50px);
6  grid-template-areas:
7    "input7 input8 input9 inputDivision"
8    "input4 input5 input6 inputMultiplication"
9    "input1 input2 input3 inputSubtraction"
10    "inputAllClear input0 inputEnter inputAddition";
11}
12.inputBtn {
13  display: flex;
14  justify-content: center;
15  align-items: center;
16  background-color: aquamarine;
17}
18.input0 {
19  grid-area: input0;
20}
21.input1 {
22  grid-area: input1;
23}
24.input2 {
25  grid-area: input2;
26}
27.input3 {
28  grid-area: input3;
29}
30.input4 {
31  grid-area: input4;
32}
33.input5 {
34  grid-area: input5;
35}
36.input6 {
37  grid-area: input6;
38}
39.input7 {
40  grid-area: input7;
41}
42.input8 {
43  grid-area: input8;
44}
45.input9 {
46  grid-area: input9;
47}
48.inputAddition {
49  grid-area: inputAddition;
50}
51.inputSubtraction {
52  grid-area: inputSubtraction;
53}
54.inputMultiplication {
55  grid-area: inputMultiplication;
56}
57.inputDivision {
58  grid-area: inputDivision;
59}
60.inputAllClear {
61  grid-area: inputAllClear;
62}
63.inputEnter {
64  grid-area: inputEnter;
65}

JavaScript
1const app = new Vue({
2  el: "#app",
3  data: {
4    displayText: "テスト",
5    buttons: [
6      { name: "0", value: "0"},
7      { name: "1", value: "1"},
8      { name: "2", value: "2"},
9      { name: "3", value: "3"},
10      { name: "4", value: "4"},
11      { name: "5", value: "5"},
12      { name: "6", value: "6"},
13      { name: "7", value: "7"},
14      { name: "8", value: "8"},
15      { name: "9", value: "9"},
16      { name: "Addition", value: "+"},
17      { name: "Subtraction", value: "-"},
18      { name: "Multiplication", value: "*"},
19      { name: "Division", value: "/"},
20      { name: "AllClear", value: "AC"},
21      { name: "Enter", value: "Enter"},
22    ]
23  }
24})
25

q_sane_qさん回答ありがとうございます。
そうです！がうまくいきませんでした。

コンソール見るとクラスは２つとも当たってくれていることが分かるものの、どうやらgrid-areaが効いていないようです。ここから先はVueというよりCSSの範疇の気がしていますが原因はわかりますでしょうか...？

行動規範の内容に同意します

回答2件

HTML
1<section class="inputContainer">
2  <span v-for="btn in buttons" :key="btn.name" v-bind:class="['inputBtn', 'input' + btn.name]">
3    {{ btn.value }}
4  </span>
5</section>

なぜかはわからないのですが<ul>タグで囲まないようにするとうまく行きました。
なのでspanタグで囲むようにしました。

投稿2021/08/26 08:31

moyong

総合スコア19

ベストアンサー

やりたいのはこういうことでしょうか？

HTML
1v-bind:class="['inputBtn', 'input' + btn.name]"

投稿2021/08/26 07:33

q_sane_q

総合スコア610

moyong

2021/08/26 08:25

そうです！2つ目のクラスについて、JS的に書くと`input${btn.name}`みたいなことを実現したいです。

moyong

2021/08/26 08:25

本文を編集させていただきました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！