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

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

ただいまの
回答率

90.49%

  • Vue.js

    755questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 785

KatOs

score 1

前提・実現したいこと

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

追記:書き方を変えてうまくいきましたが、下記のやり方では、
<td class> となってしまいます。 

期待するHTML

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

該当のソースコード

Vue.component('student-list', {
    template: `
    <table>
        <tbody>
        <tr v-for="student in students">
            ### 初回質問時
            <td v-for="(value, key) in columns" v-bind:class="{student-outer: key==='student_name'}">
            ### 質問更新時
            <td v-for="(value, key) in columns" v-bind:class="[key==='student_name' ? 'student_outer' : '']">
                {{ student[key] }}
            </td>
        </tr>
        </tbody>
    </table>
    `,
    data: function () {
        var loading = true;
        var title = '';
        var columns = {
            id: 'ID',
            student_name: '生徒氏名',
        };
        return {
            loading: loading,
            title: title,
            columns: columns,
            students: [],
        }
    },
...................
/* students は以下のように別でセット。
students = [
{ "id":1 , "student_name": "A"},
{ "id":2 , "student_name": "B"},
]
*/

Console でのエラーメッセージ

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

補足情報(言語/FW/ツール等のバージョンなど)

https://unpkg.com/vue  v2.5.7

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

これで通りませんか?

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/21 17:24 編集

    通りました。ありがとうございます。ただ私にとっては謎が深まりました。
    ハイフンは「ケバブスタイル」だから、特別扱いされているのでしょうか? 結局
    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 属性が入ります。そういうものでしょうか?



    ```

    キャンセル

checkベストアンサー

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 18:03

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

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    console.logの挙動について

    javascriptのconsole.logの挙動で、どうしても理解できないことがありました。 console.logの実行地点では何もデータが入っていないにもかかわらず、全ての実

  • 解決済

    class直下 radioのvalueをすべて取得したい

     やりたいこと 現在、新規登録画面を作成しています submitが行われた時に,各科目radioボタンのvalue値を計算しようとしたところ input内のnameを毎回

  • 解決済

    for文で16マスのtable

    <table id = t1> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <

  • 解決済

    テーブル内の数値を自動で合計

    前提・実現したいこと こちらの記事からテーブル内の数値を合計する事が出来ました。 https://teratail.com/questions/82858 全くの初心者なので可

  • 解決済

    5人のテストの得点から平均値と最大値の算出

    こんにちは。Js初心者のものです。 5人のテストの得点から平均値と最大値の算出するプログラムを作っています。 表示は「○○さんの平均値は○○点」のように人の名前と点数を表示させ

  • 解決済

    [javascript]select2で選択し3を連動して表示させたい。

    select2で選択しselect3を連動して表示させたい。 途中まで書きましたが、現在htmlに初めからあるselect1と、javascriptでselect2に値をいれている

  • 解決済

    javascriptで置換した文字列をもとに戻したい

    javascript初学者です。 以下のように、クリックイベントを取得し関数でwebページ内の文字列をDOMで置換しています。 $(function(){ $('.ch

  • 解決済

    vue.jsでli要素にactiveをつける

     実現したいこと 選択したリストにactiveのクラスをつけたいです。 選択中に他のliをクリックしたら、他のliにactiveを付け替えるものを想定しています。 :class =

同じタグがついた質問を見る

  • Vue.js

    755questions

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