Modal displays entire json data instead of only one element

Question

This is how my json looks like. I would like to display the data from the element I clicked on in a modal.

[{
        "id": 1,
        "companyName": "test",
        "image": "https://mmelektronik.com.pl/wp-content/uploads/2017/10/Insert-logo.jpg.png",
        "location": "Warsaw",
        "salary": "10000",
        "skill": "Junior",
        "tags": "test",
        "jobDescription": "test",
        "title": "UI Designer"
    }

]    

Now I want to access only jobDescription and display it in the modal.

b-modal(hide-footer="", :id="id")
      template(#modal-title="")
        | Information
      .d-block.text-center
        p {{ want the jobDescription here }}
        b-button(variant="primary") Apply

This is how I open the modal.

  openModal(item) {
      this.offer = item;
      this.$bvModal.show(this.id);
    }

Answer 1

v-for is used to loop through a set of data, which isn't what you want. Assuming id is the identifier from your json, try this:

b-modal(hide-footer="", :id="id")
      template(#modal-title="")
        | Information
      .d-block.text-center
        p() {{ offers[id].jobDescription }}
        b-button(variant="primary") Apply

You could put this in a computed instead if you're storing the selected id as a data variable:

computed: {
  selected() {
    return this.offers[this.id].jobDescription;
  }
}

(Edit: didn't realize you posted your json, my previous answer was for an array)