How to add new data to existing nested Array, based on existing data

I have a very simple Vue element on a site (one page only), which uses API data from a job site.

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.

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'.

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.

My vue template currently:

<div >
    <div >

        <button  @click="filter = ''">Show all</button>
        <button @click="filter = 'Lettings Negotiator'">Lettings Negotiator</button>
        <button @click="filter = 'Sales Negotiator'">Sales Negotiator</button>
    </div>

    <div v-for="job in filteredJobs" >
        <div >

            <h2>{{job.jobTitle.toUpperCase()}}</h2>

            <ul>
            <li>{{job.locationName}}</li>
            <li>£{{job.minimumSalary}} -  £{{job.maximumSalary}}</li>
            <li>{{job.Category}}</li>
            </ul>

        </div>
        <div >

            <p  v-html="job.jobDescription"></p>
            <div >

                <a href="/contact" >

                    APPLY NOW

                </a>

                <a v-bind:href="job.jobUrl" target="_blank">View the full job description on Reed...</a>

            </div>

        </div>
    </div>

</div>

And the script:

<script type="text/ecmascript-6">


    export default{

        data()
        {

            return {
                searchQuery: null,
                reedApiData: this.reedApiDataProp,
                dataClean: [],
                filter: "",

            }

        },

        methods:{
            
        },


        props:
            [
                'reed-api-data-prop'
            ],

        computed: {

            filteredJobs() {

                if (!this.filter) {
                    return this.reedApiData.results;
                }
                return this.reedApiData.results.filter(job => job.jobTitle === this.filter);
            }
        },

        beforeMount(){

        },

        mounted(){

        }
    }
</script>```

CodePudding user response：

You can add array in data property with mappings title->category:

new Vue({
  el: "#demo",
  data(){
    return {
      searchQuery: null,
      reedApiData: {results: [{jobTitle: 'Lettings Negotiator', locationName: 'aaa', minimumSalary: 100, maximumSalary: 500}, {jobTitle: 'Lettings Negotiator', locationName: 'bbb', minimumSalary: 200, maximumSalary: 700}, {jobTitle: 'Sales Negotiator', locationName: 'ccc', minimumSalary: 300, maximumSalary: 900}]},
      dataClean: [],
      filter: "",
      categories: [{name: 'Estate Agency', pair: 'Lettings Negotiator'}, {name: 'aaa', pair: 'Sales Negotiator'}]
    }
  },
  methods:{
    fillCat() {
      this.reedApiData.results.map(m => {
        const cat = this.categories.find(c => c.pair === m.jobTitle)
        m.Category = cat?.name
      })
    },
  },
  props: ['reed-api-data-prop'],
  computed: {
    filteredJobs() {
      if (!this.filter) {
        return this.reedApiData.results;
      }
      return this.reedApiData.results.filter(job => job.jobTitle === this.filter);
    }
  },
  mounted(){
    this.fillCat()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" >
  <div >
    <button  @click="filter = ''">Show all</button>
    <button @click="filter = 'Lettings Negotiator'">Lettings Negotiator</button>
    <button @click="filter = 'Sales Negotiator'">Sales Negotiator</button>
  </div>
  <div v-for="job in filteredJobs" >
    <div >
      <h2>{{job.jobTitle.toUpperCase()}}</h2>
      <ul>
      <li>{{job.locationName}}</li>
      <li>£{{job.minimumSalary}} -  £{{job.maximumSalary}}</li>
      <li>{{job.Category}}</li>
      </ul>
    </div>
    <div >
      <p  v-html="job.jobDescription"></p>
      <div >
        <a href="/contact" >
            APPLY NOW
        </a>
        <a v-bind:href="job.jobUrl" target="_blank">View the full job description on Reed...</a>
      </div>
    </div>
  </div>
</div>