Javascript 如何在模式中显示v-for中单击元素的vue数据

这就是我的json的样子。我以v-for格式显示了它们，我可以点击其中一个。我想在模式中显示我单击的元素的数据

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

这就是我打开模态的方式

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

组成部分

  b-container
    b-card.joblist__post.mt-2(
      v-for="offer in filteredOffers",
      :id="id"
      :key="offer.id",
      @click="openModal"
    )
      .d-flex
        .joblist.d-flex.w-100
          .joblist__info.d-flex.align-items-center
            .company-logo.d-flex.align-items-center.mr-3
              b-img.logo(:src="offer.image")
            .joblist-name.d-flex.flex-column.text-left
              h5.mb-0.font-weight-bold {{ offer.title }}
              .located.d-flex.align-items-center.mt-2.justify-content-start
                b-icon.mr-2(icon="geo-alt-fill")
                p.m-0.text-secondary.joblist-span {{ offer.location }}
                b-icon.mx-2(icon="person-fill")
                p.m-0.text-secondary.joblist-span {{ offer.companyName }}
                b-icon.mx-2(icon="bar-chart-fill")
     

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


export default {
  data() {
    return {
      search: "",
    };
  },
  computed: {
    ...mapState({
      offers: (state) => state.offer.offers,
      loading: (state) => state.offer.loading
    }),
 
    filteredOffers(){
      return this.offers.filter((offer) => {
        return offer.title.match(this.search);
      })
      
    },

  },
  methods: {
    ...mapActions({
      fetchOffers: "fetch",
    }),
    openModal(item) {
      this.offer = item;
      this.$bvModal.show(this.id);
    }
  },
  mounted() {
    this.fetchOffers();
    this.id = this._uid;
},
  
};

---

这里有一个简单的方法，你可以采取。在如下数据中具有

selectedItem

属性：

data: {
   return {
      selectedItem: {}
   }
}

并在元素上添加一个单击按钮，如下所示，将单击的对象指定给selectedItem：

<button v-for="(e, i) in whateverDataArray" :key="i" @click="selectedItem=e">
    {{ e.companyName }}
</button>

{{e.companyName}

---

然后简单地将selectedItem作为道具传递给model，因此当model出现时，它将显示被单击的

selectedItem

道具

将您的

数据更改为：

data（）{
返回{
搜索：“，
报价：空
};
},

在模板中使用以下内容：

p {{ offer.jobDescription }}

并将
单击
处理程序更改为：

@click=“OpenModel（优惠）”

一旦在数据中首先定义了
offer
，并通过单击传递，来自评论的建议就应该起作用。您可以在
openModal
操作中设置
offer

您的模态不应位于
v-for
内。取出并硬编码一个id：

b-modal（隐藏页脚=”，id=“offerModal”）

打开它：

this.$bvModal.show（'offerModal'）；
能否创建一个可复制的示例？您将v-for列表作为按钮。单击一个按钮，模态打开，您希望在模态中显示该按钮包含的json信息。由于您正在父级中设置
this.offer
，因此它应该可用。尝试
{{offer.jobscription}}
@Dan，不会这样工作，当我这样做时，页面会变为空白。这是一个猜测，因为看起来您在父级中设置了
this.offer
。但这只是一个猜测，因为您尚未显示组件。你应该表现出来。也许可以直接从
id
完成，但这似乎是不必要的，取决于父级中定义的内容
p {{ offer.jobDescription }}