Display the complete JSON data, not just individual elements

Question

This is what my json looks like. I want to display the data of the element I clicked on in a modal box.

[{
        "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 jobDescription and display it in modal box. 

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

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 is not what you want. Assuming id is the identifier in your json, try this:

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

If you store the selected id as a data variable, you can put it in a computed property:

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

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