How to add object items to a computed property item for placement in a route param?

Question

I have a single page app that makes a GET request and receives an array of objects named `offices' which is a list of office names and their ids like so:

offices: [
      { office: "Blue", office_id: 1 },
      { office: "Orange", office_id: 2 },
      { office: "Red", office_id: 3 }
    ]

There is also a computed property named unresolvedIssuesGroupedByOffice that returns data like the following:

{
   "Blue":[
      {
         "issue_id":"232121",
         "branch":"Blue"
      },
      {
         "issue_id":"231131",
         "branch":"Blue"
      }
   ],
   "Orange":[
      {
         "issue_id":"332111",
         "branch":"Orange"
      },
      {
         "issue_id":"333141",
         "branch":"Orange"
      }
   ],
   "Red ":[
      {
         "issue_id":"224444",
         "branch":"Red "
      },
      {
         "issue_id":"111111",
         "branch":"Red "
      }
   ]
}

My HTML template then renders all this into a table like so:

<table style="width:100%">
      <tr>
        <th>Office</th>
        <th>Number of Unresolved Issues</th>
      </tr>
      <tr v-for="(issues, office) in unresolvedIssuesGroupedByOffice" :key="office">
        <td><router-link
                :to="{
                  name: 'unresolved-issues-by-office-list',
                  params: { office_id: '' }<----- how to get the office id here?
                }"
                >{{ branch }}</router-link
              ></td>
        <td>{{ issues.length }}</td>
      </tr>
    </table>

Here's an image of what the rendered table looks like:

Here is my question: [with JSFIDDLE for show-and-tell]

I have an endpoint available like so: /unresolvedIssuesGroupedByOffice/{office_id} which will return a JSON object of all the unresolved issues for that office.

I want to use the office_id as a route param so that the user can click on the office name in the table and be taken to my unresolved-issues-by-office view.

  {
    path: '/reports/unresolved-issues-by-office/:office_id',
    name: 'unresolved-issues-by-office',
    component: () =>
      import(/* webpackChunkName: "test" */ './components/UnresolvedIssuesByOfficeList.vue'),
    props: true
  }

But, the unresolvedIssuesGroupedByOffice computed property does not contain the office_id. How can I "associate" it with the office so I append the office_id to the endpoint? I hope this makes sense of what I am trying to say. Thanks!

Answer 1

UPDATE:

Instead of pushing the issue with only office prop on your computed property... you can also add office _id prop to the issue object :

unresolvedIssuesGroupedByOffice() {
  return this.unresolvedIssues.reduce((groups, issue) => {
    issue.office_id = this.offices.find((off) => off.office == issue.office).office_id
    let office = groups[issue.office] || []
    office.push(issue)
    groups[issue.office] = office
    return groups
  }, {})
}

and on the template :

<table style="width:100%">
  <tr>
    <th>Office</th>
    <th>Office_id</th>
    <th>Number of Unresolved Issues</th>
  </tr>
  <template v-for="(issues,office) in unresolvedIssuesGroupedByOffice">
        <tr v-for="issue in issues">
          <td>{{issue.office}}</td>
          <td>{{issue.office_id}}</td>
          <td>{{issues.length}}</td>
        </tr>
      </template>
</table>

here is a Jsfiddle

Or :

use a method (this is not recommended since method calls in templates is not a good idea) in which i give the office as an argument and it will look on that array and return the matching id for that office :

 methods : {
  getOfficeId(off){
        return this.offices.find((office) => office.office == off).office_id
    }
 }

and on the router-view :

<tr v-for="(issues, office) in unresolvedIssuesGroupedByOffice" :key="office">
  <td>
    <router-link :to="{
                  name: 'unresolved-issues-by-office-list',
                  params: { office_id: getOfficeId(office) }
                }">{{ branch }}</router-link>
  </td>
  <td>{{ issues.length }}</td>
</tr>

here is a Jsfiddle