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

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

新規登録して質問してみよう
ただいま回答率
85.38%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3593閲覧

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

moyong

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/08/26 05:02

編集2021/08/26 08:24

前提・実現したいこと

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

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

イメージ説明
現在次のように書いています。

HTML

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

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

該当のソースコード

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さん回答ありがとうございます。
そうです!がうまくいきませんでした。
イメージ説明

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.38%

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

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

質問する

関連した質問