我有一个带有选项的选择元素,它循环遍历对象数组(服务)。
<select placeholder="Vælg ydelse">
<option v-for="service in services" :key="service.id">
{{service.name}}
</option>
</select>
在我的数据对象中,我有
chosenService: {
id: 42,
name: "some service",
group: {
id: 2,
name: "some group within the service",
},
additions: [],
classSignupMoreActive: false,
},
我希望在选择更改后检索它。
最后,我从父级发送 services 数组,因为所有这些都发生在组件中。我不确定这是否是最正确的方法。
像这样:
<Modal
:show="showModal"
@close="showModal = false"
title="Modal Title"
:services="this.services"
>
</Modal>
最佳答案
您可以使用v-model
并将对象传递给选项的:value
属性:
new Vue({
el: "#demo",
data() {
return {
services: [{id: 42, name: "some service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}, {id: 43, name: "some other service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}],
chosenService: {},
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<select v-model="chosenService" placeholder="Vælg ydelse">
<option v-for="service in services" :key="service.id" :value="service">
{{service.name}}
</option>
</select>
chosenService = {{ chosenService }}
</div>
关于javascript - 在Vue中,使用select在对象数组中选择一个对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72530961/