这就是我的 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.
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);
}
组件
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>
然后只需将 selectedItem 作为 props 传递给模态框,这样当模态框出现时,它将显示单击的 selectedItem
的 props!
编辑:在您的情况下,您也应该从 for 循环中删除模式。此外,您不需要将 selectedItem
作为属性传递给模式,因为您可以访问 selectedItem
。
关于javascript - 如何在模态中显示v-for中点击元素的vue数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65139842/