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

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

ただいまの
回答率

91.36%

  • Vue.js

    182questions

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

解決済

回答 2

投稿 2017/11/21 16:04 ・編集 2017/11/21 16:15

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

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 16:49

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/21 17: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 属性が入ります。そういうものでしょうか?



    ```

    キャンセル

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 17:55

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/21 18:03

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

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

  • 受付中

    HTMLの計算の仕方を教えてください。

    HTMLでこういう単純なものを、計算して、一番右に合計値を付けるにはどうすればいいでしょうか。 イメージとしては、100,100,50の値を変更すれば、適宜再計算されていく感じで

  • 解決済

    underscoreの入れ込構造

    5つの入力項目があり、その値を 追加ボタンを押すと<th>の下に一件ずつ仮登録したいです。 その時にtemplateを使ってやろうと考えているのですが、 下のコードのようにt

  • 解決済

    ボタンを押してテーブルを複製させたい

    タイトルの通りですが、「テーブル追加」のようなボタンを押すと、テーブルが追加されるような仕組みを作りたいです。 (内容は気にしないでください、例です) 「テーブル追加」ボタンを押

  • 解決済

    console.logの挙動について

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

  • 解決済

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

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

  • 解決済

    jQueryを用い、隣り合うセルの色が異なる九九表を作成

    前提・実現したいこと 独学で勉強しており、下記の表を作りたいのですが、中々作成することが出来ません。 教えて頂けないでしょうか。 【課題】 jQueryを用い、隣り合うセルの色

  • 解決済

    for文で16マスのtable

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

  • 受付中

    DataTablesで絞り込みを行いたい。

    DataTablesに対してプルダウン、チェックボックスで絞り込みを行いたい。 EX TABLE FILTER使えよって話ですが、表題通り、 DataTablesのテーブルに対して

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

  • Vue.js

    182questions