json.jbuilderでオブジェクトの配列を渡す、他

v-forディレクティブのなかでv-on:click="メソッド()"の引数に配列の要素を渡す

特別な書き方は必要なく、そのまま書ける。

<tbody>
      <tr v-for="race in racesInfo">
        <td>{{ race.date }}</td>
        <td>{{ race.weather }}</td>
        <td>{{ race.condition }}</td>
        <td>{{ race.location }}</td>
        <td>{{ race.distance }}</td>
        <td>{{ race.head_count }}</td>
        <td v-on:click="showRecords(race)">{{ race.name }}</td> 
      </tr>
    </tbody>

{{ }}で囲ってみたり${ }で囲ってみたりして無駄な時間を過ごしてはいけない。

選択中の項目を装飾

左の表のレース名をクリックすると右のテーブルにそのレースの結果が表示される。
そのときに、選択中の項目（ここではレース名）をわかりやすく装飾する必要がある。

<tbody>
      <tr v-for="race in racesInfo">
        <td>{{ race.date }}</td>
        <td>{{ race.weather }}</td>
        <td>{{ race.condition }}</td>
        <td>{{ race.location }}</td>
        <td>{{ race.distance }}</td>
        <td>{{ race.head_count }}</td>
        <td v-on:click="showRecords(race)"  :class="[isActiveRace(race) ? 'featured' : ' ']">{{ race.name }}</td> 
      </tr>
    </tbody>

さっきのコードに :class="[isActiveRace(race) ? 'featured' : '']"を追加しました。
:classはv-bind:classの短縮形。

 v-bind:class="{ '付与するクラス' : プロパティ名 }"

と記述することで、プロパティの値がtrueのときだけクラスが与えられる。

  :class="[isActiveRace(race) ? 'featured' : ' ']"

このように書くことで、isActiveRaceメソッドがtrueを返したときのみfeaturedクラスを付与することができる。

:class="{'featured' : isActiveRace(race}"

↑こう書くとエラーになる。

json.jbuilderでオブジェクトの配列を渡す

コントローラ側で@recordsと@raceを渡すとする。
@recordsには複数の成績が配列で入っていて、@raceにはレース自体の情報が入っている。

jbuilderではjson.array!が使えるので

json.records do 
    json.array! @records, :rank, :name, :post_position, ...... :race_id
end

json.race do
  json.extract! @race, :date, :name, :location, :distance, :condition, :weather, :head_count
end

このように記述すれば

 "data" : {   
           "records" : [ { "name": "1着の馬", "jockey": "池添謙一", "odds": "2.7"...}, {  2着の馬の成績  }... ], 
           "race" : { "title": "桜花賞", "condition": "稍重" ...  } 
           }

JSONデータを配列で送ることができる。