模态显示整个 json 数据而不是仅显示一个元素

Question

这就是我的 json 的样子。我想在模式中显示我点击的元素的数据。

[{
        "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

这就是我打开模式的方式。

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

Answer 1

v-for 用于循环遍历一组数据，这不是您想要的。假设 id 是来自您的 json 的标识符，试试这个：

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

如果您将选定的 id 存储为数据变量，则可以将其放入计算中：

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

（编辑：没意识到你发布了你的 json，我之前的回答是针对数组）

模态显示整个 json 数据而不是仅显示一个元素

Modal displays entire json data instead of only one element

javascript

vue.js

vue-component

vuejs2

v-for