HOME > Vue.js

v-for リストレンダリング

基本の使い方
<tr v-for="staff in filteredData">

</tr> 
indexのある場合(第二引数にindexを指定)
<span v-for="(val, index) in staff.roles">{{index}} </span>
オブジェクトの場合はキーも表示できる
<li v-for="(value, key , index) in sampleObject">[{{index}}]:({{key}}){{value}}</li>

v-forの中のボタンからデータをセットしたい場合
val in lists のvalを引数として与えるのが簡単。

複数の値を与える場合、引数に配列を渡してもいいが、オブジェクトをJSON形式で渡す。

<tr v-for="car in daburiCar">
td>{{car.syaken}}</td>
	<td>{{car.in_use}}</td>
	<td>	
		<button v-for="tenken in car.tenken" @click="editTenkencar(
		{plate: car.num_plate, syaken: car.syaken, tenken: tenken})">{{tenken.tenken}}</button>		
	</td>
</tr>

JS
methods
	editTenkencar : function(data){
		this.editTenken = data;
	}