Home>

Using v-for

April May May June
Item A 〇P 〇P 〇P
Item B 〇P 〇P 〇P

I'd like to make a table like the one above, but only 5 items are listed vertically
I don't know how to capture only points for the month and June.
Excuse me, but I am very happy if you can answer.

Error message
Error message
There is no particular out.
### Corresponding source code

Enter the language name here
Source code
[HTML]
<table id ="team-a"border ="1">
<section>
<tr align ="center">
<td rowspan ="11">ATeam</td>
<td>field name</td><td>{{month1}} month</td><td>{{month}} month</td><td>{{month}} Month</td>
</tr>
<tr v-for ="item in items">
<td>{{item.category}}</td><td>{{item.point}}</td>
</tr>
</section>
</table>
[JS]
{team:'A&apos ;, month:'April&apos ;, category:'Hotel (Accommodation)', point: 14},
{team:'A&apos ;, month:'April&apos ;, category:'Hotel (wedding)', point: 7},
{team:'A&apos ;, month:'May&apos ;, category:'Hotel (Accommodation)', point: 146784},
{team:'A&apos ;, month:'May&apos ;, category:'Hotel (wedding)', point: 7891},
{team:'A&apos ;, month:'June&apos ;, category:'Hotel (Accommodation)', point: 675677896},
{team:'A&apos ;, month:'June&apos ;, category:'Hotel (wedding)', point: 9500},

We are currently writing this way.

Tried

Please describe what you tried for the problem here.

Supplemental information (FW/tool version etc.)

We use Visual Studio Code.

Thanks for your patience.

  • Answer # 1

    I'd like you to draw the filtered result every month.
    By changing currentMonth to May or June, I think the list will change.

    data: () =>({
      currentMonth: 'April',
      dataSource: [
        {team: 'A', month: 'April', category: 'Hotel (stay)', point: 14},
        {team: 'A', month: 'April', category: 'Hotel (wedding)', point: 7},
        {team: 'A', month: 'May', category: 'Hotel (stay)', point: 146784},
        {team: 'A', month: 'May', category: 'Hotel (wedding)', point: 7891},
        {team: 'A', month: 'June', category: 'Hotel (stay)', point: 675677896},
        {team: 'A', month: 'June', category: 'Hotel (wedding)', point: 9500}
      ]
    }),
    computed: {
      items () {
        return this.dataSource.filter (d =>d.month === this.currentMonth)
      }
    }

Related articles