Modal 显示整个 json 数据而不是仅显示一个元素答案

【问题标题】：Modal displays entire json data instead of only one elementModal 显示整个 json 数据而不是仅显示一个元素
【发布时间】：2021-03-14 05:06:54
【问题描述】：

这就是我的 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);
    }

【问题讨论】：

你的offers json的内容是什么？
findit-b484b.firebaseio.com/offer.json ，它不是只显示一个jobDescription，而是在模态中显示所有它们。我想根据我点击的元素显示 jobDescription。

标签： javascript vue.js vuejs2 vue-component v-for

【解决方案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，无效？ json 应该在一个数组中吗？我使用 firebase 创建这个 json 用于测试目的。我正在等待新的 API，它可以与您的答案一起使用吗？
不，没关系，有效的json可以是对象也可以是数组。数组对于数据集来说可能只是更常见一点
所有这些map、filter、reduce等都是为了在数组上工作吗？我应该将我的 json 改造成数组格式吗？
如果您的新数据是对象数组，则需要更改offers[id]，因为数组是按索引而不是键查找的。因此，如果它是一个数组，您将需要索引或数组的 .find 方法，就像您提到的那样（是的，这些是用于数组的）。不过，对象数据并没有错。我会留下它。