Looking at my array data:
[{ id: '1234', year: 2019 , name: 'Test 1- 2019', rate: 1},
{ id: '1234', year: 2020, name: 'Test 2 - 2020', rate: 2 },
{ id: '1234', year: 2020, name: 'Test 3 - 2020', rate : 3 }
...]
I am trying to display it in a table with this layout:
<table border="1">
<tr>
<th> 2019 </th>
<th> 2020 </th>
</tr>
<tr>
<td> Test 1- 2019</td>
<td> Test 2- 2020 </td>
</tr>
<tr>
<td> </td>
<td> Test 3- 2020 </td>
</tr>
</table>Can anyone provide suggestions on how to achieve this? Thank you! :)
Update: This is what I have attempted so far:
<table border="1">
<tr>
<th> 2019 </th>
<th> 2020 </th>
</tr>
<tr>
<td> Test 1- 2019</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> Test 2 - 2020 </td>
</tr>
<tr>
<td> </td>
<td> Test 3 - 2020 </td>
</tr>
</table>I am currently using a simple v-for loop in VueJS to iterate through the array.
<table>
<tr>
<td> ...year </td>
</tr>
<tr v-for="item in arr">
<td> {{ item.year == "2019" ? item.name : ""}} </td>
<td> {{ item.year == "2020" ? item.name : ""}} </td>
</tr>
</table>