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

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

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

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

Q&A

解決済

2回答

1600閲覧

vue.jsでv-forのkeyに応じてclassを切替えたい。

KatOs

総合スコア8

Vue.js

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

0グッド

1クリップ

投稿2017/11/21 07:04

編集2017/11/21 07:15

###前提・実現したいこと
vue.js で v-for で v-bind:class を切替えたいと思い下記のコードを書きました。
2列のtd を出力していますが、一部のTDにのみ class 属性を付けたいのですがうまくいきません。

追記:書き方を変えてうまくいきましたが、下記のやり方では、

<td class> となってしまいます。

###期待するHTML

html

1<tr> 2 <td>1</td><td class="student_outer">A</td> 3 <td>2</td><td class="student_outer">B</td> 4</tr>

###該当のソースコード

javascript

1Vue.component('student-list', { 2 template: ` 3 <table> 4 <tbody> 5 <tr v-for="student in students"> 6 ### 初回質問時 7 <td v-for="(value, key) in columns" v-bind:class="{student-outer: key==='student_name'}"> 8 ### 質問更新時 9 <td v-for="(value, key) in columns" v-bind:class="[key==='student_name' ? 'student_outer' : '']"> 10 {{ student[key] }} 11 </td> 12 </tr> 13 </tbody> 14 </table> 15 `, 16 data: function () { 17 var loading = true; 18 var title = ''; 19 var columns = { 20 id: 'ID', 21 student_name: '生徒氏名', 22 }; 23 return { 24 loading: loading, 25 title: title, 26 columns: columns, 27 students: [], 28 } 29 }, 30................... 31/* students は以下のように別でセット。 32students = [ 33{ "id":1 , "student_name": "A"}, 34{ "id":2 , "student_name": "B"}, 35] 36*/

###Console でのエラーメッセージ

Raw expression: v-bind:class="{student-outer: key==='student_name'}"

###補足情報(言語/FW/ツール等のバージョンなど)
https://unpkg.com/vue v2.5.7

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

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

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

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

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

guest

回答2

0

これで通りませんか?

javascript

1<td v-for="(value, key) in columns" :class="{student_outer: key === 'student_name'}">

投稿2017/11/21 07:49

oligin

総合スコア138

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

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

KatOs

2017/11/21 08:40 編集

通りました。ありがとうございます。ただ私にとっては謎が深まりました。 ハイフンは「ケバブスタイル」だから、特別扱いされているのでしょうか? 結局 NG <td v-for="(value, key) in columns" :class="{student-outer: key === 'student_name'}"> OK <td v-for="(value, key) in columns" :class="{'student-outer': key === 'student_name'}"> OK <td v-for="(value, key) in columns" :class="{student_outer: key === 'student_name'}"> OK <td v-for="(value, key) in columns" v-bind:class="[key==='student_name' ? 'student_outer' : '']"> という結果でしたが、いずれも、 <td class>1</td><td class="student_outer">A</td> または、 <td class>1</td><td class="student-outer">A</td> と 空のclass 属性が入ります。そういうものでしょうか? ```
guest

0

ベストアンサー

v-bindなど、vueのバインド対象になっているattributeの値は、""で括られていても、
jsの扱いを受けますので、「-」など変数名で扱えないものは、文字列のハッシュ値として扱います。

なので下記のようなことになります。

// OK {student_name : key === 'student_name'} // 変数名に_は使える var student_name = key === 'student_name'
// NG {student-outer: key === 'student_name'} // 変数名に-は使えないのでエラーが出るはず var student-outer = key === 'student_name'

尚、蛇足ですがインラインのバインディングは下記が参考になります。
https://jp.vuejs.org/v2/guide/class-and-style.html

投稿2017/11/21 08:55

oligin

総合スコア138

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

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

KatOs

2017/11/21 09:03

助かりました。ありがとうございます。javascript では変数などにハイフンが使えないのでしたね。他言語がごっちゃになったようです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問