Q&A
Closed
LaravelとVueを使った座席表を作成しています。
検索された座席番号に対応した席を光らせる機能を作っているのですが、
下記のようにv-forで座席エリアを表示させている場合、
例えば3階席のL03の要素だけ光らせたい場合は、どのように指定すれば良いのでしょうか？
v-forで繰り返しで要素を表示させているので、特定の要素の指定の仕方がわかりません。
v-forの3番目の要素だけ指定するようなことができると良いのですが、、。
<div class="stand-3l">
<h>3階席L</h>
<span v-for="n in 5" :key="n">
<tr class="stand-3lTop">
<td>L0{{ 2 * n - 1 }}</td>
</tr>
<tr class="stand-3lBottom">
<td>L0{{ 2 * n }}</td>
</tr>
</span>
</div>
以下は値が3の時だけ特定のクラスを有効にしてCSSを適用する例です。
クラス名を仮に"stand-flash"としてみたので、.stand-flashセレクタに好きなスタイルを設定して結果を確認してみて下さい。
<tr class="stand-3lTop">
<td :class="{'stand-flash': 2 * n - 1 === 3}">L0{{ 2 * n - 1 }}</td>
</tr>
或いは、v-ifで分岐させる場合の例。L03だけ文字を赤くしています。
<tr class="stand-3lTop">
<td v-if="2 * n - 1 === 3" style="color:red">*L0{{ 2 * n - 1 }}*</td>
<td v-else>L0{{ 2 * n - 1 }}</td>
</tr>
@wadigchan
Questioner
@wadigchan
Questioner
if文などで、class='stand-flash' の style を"color:red"にするというような処理を書けば良いでしょうか？
if文は必要ありません。<style>タグ内に
.stand-flash {
color: red;
}
という風に書けばL03が赤くなります。
この要素だけ最初から赤く光ってしまうのですが、検索された時だけ光らせることもできるのでしょうか？
2 * n - 1 === 3
上記コードのこれは席番号が3の時にtrueになるという式なのですが、これを「検索された」席の場合に当てはめればよいだけです。例えば、光らせたい席の数値がseatNumというリアクティブな変数に格納されている場合を例にすれば、
2 * n - 1 === seatNum
という風になります。
@wadigchan
Questioner