title: How to add new data to existing nested Array, based on existing data - Using Vue and an API
body: <p>I have a very simple Vue element on a site (one page only), which uses API data from a job site.</p>
  <p>I have set up filter buttons, which filter by the Job Title, but as there are many Job Titles, I would now like to filter by category instead.</p>
  <p>The API data does not include any categories, so I would need to add a category to each job array based on the job title. For example, if the Job Title is Lettings Negotiator, I would like to add the category of 'Estate Agency'.</p>
  <p>I believed the best way to do this is by pushing the data into each job array based on 'if' statements, but I am struggling to do this. I don't have much experience with vue, so would appreciate any advice.</p>
  <p>My vue template currently:</p>
  
  <pre><code>&lt;div class=&quot;reed-jobs-container&quot;&gt;
      &lt;div class=&quot;filterbtn&quot;&gt;
  
          &lt;button class=&quot;active&quot; @click=&quot;filter = ''&quot;&gt;Show all&lt;/button&gt;
          &lt;button @click=&quot;filter = 'Lettings Negotiator'&quot;&gt;Lettings Negotiator&lt;/button&gt;
          &lt;button @click=&quot;filter = 'Sales Negotiator'&quot;&gt;Sales Negotiator&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div v-for=&quot;job in filteredJobs&quot; class=&quot;reed-job&quot;&gt;
          &lt;div class=&quot;job-essentials&quot;&gt;
  
              &lt;h2&gt;{{job.jobTitle.toUpperCase()}}&lt;/h2&gt;
  
              &lt;ul&gt;
              &lt;li&gt;{{job.locationName}}&lt;/li&gt;
              &lt;li&gt;£{{job.minimumSalary}} -  £{{job.maximumSalary}}&lt;/li&gt;
              &lt;li&gt;{{job.Category}}&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
          &lt;div class=&quot;job-description&quot;&gt;
  
              &lt;p class=&quot;jobDescText&quot; v-html=&quot;job.jobDescription&quot;&gt;&lt;/p&gt;
              &lt;div class=&quot;job-actions&quot;&gt;
  
                  &lt;a href=&quot;/contact&quot; class=&quot;standard-button&quot;&gt;
  
                      APPLY NOW
  
                  &lt;/a&gt;
  
                  &lt;a v-bind:href=&quot;job.jobUrl&quot; target=&quot;_blank&quot;&gt;View the full job description on Reed...&lt;/a&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the script:</p>
  <pre><code>&lt;script type=&quot;text/ecmascript-6&quot;&gt;
  
  
      export default{
  
          data()
          {
  
              return {
                  searchQuery: null,
                  reedApiData: this.reedApiDataProp,
                  dataClean: [],
                  filter: &quot;&quot;,
  
              }
  
          },
  
          methods:{
              
          },
  
  
          props:
              [
                  'reed-api-data-prop'
              ],
  
          computed: {
  
              filteredJobs() {
  
                  if (!this.filter) {
                      return this.reedApiData.results;
                  }
                  return this.reedApiData.results.filter(job =&gt; job.jobTitle === this.filter);
              }
          },
  
          beforeMount(){
  
          },
  
          mounted(){
  
          }
      }
  &lt;/script&gt;```
  
  </code></pre>