如何在Select-box中选择特定选项，哪个选项在VUE上具有其值中具有对象？
我有一个带有Select-Boxes的编辑表单。如您所见，第二个选择框具有每个选项在其值中具有对象的选项。 由于它是一个编辑表单，因此我需要知道从第一个选择哪个选项，但AS form.customer在第二个select-box v-model中是一个对象{name：'peter'，'peter'，年龄：20}，不可能从第一个作为选定选项显示。 我需要以peter -peter -20进行选择并显示。
Vue.component('editForm', {
template: `<div>
<b-form @submit="onSubmit">
<b-form-group id="input-group-1" label="Food:" label-for="input-1">
{{ form.food }}
<b-form-select
id="input-1"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<b-form-group id="input-group-2" label="Customer:" label-for="input-2">
<select
id="input-2"
v-model="form.customer"
class="form-control"
>
<option v-for="item in customers">
{{ item.name }} - {{ item.age }}
</option>
</select>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</div>`,
data() {
return {
foods: ['rice', 'carrots', 'bread'],
customers: [
{ name: 'peter', age: 18 },
{ name: 'peter', age: 20 },
{ name: 'sara', age: 18 }
],
form: {
food: 'carrots',
customer: { name: 'peter', age: 20 }
}
}
},
methods: {
onSubmit(event) {
event.preventDefault()
// submit the form
}
}
})
new Vue({
el: "#app",
});<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<div id="app">
<edit-form/>
</div>I have an edit form with select-boxes. The second select-box, as you can see in example, have options which each option has an object in its value.
As it is an edit form I need to know which option is selected from the first but as form.customer in second select-box v-model is an object { name: 'peter', age: 20 }, it is not possible to be shown from the first as selected option.
I need in the form peter - 20 be selected and shown.
Vue.component('editForm', {
template: `<div>
<b-form @submit="onSubmit">
<b-form-group id="input-group-1" label="Food:" label-for="input-1">
{{ form.food }}
<b-form-select
id="input-1"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<b-form-group id="input-group-2" label="Customer:" label-for="input-2">
<select
id="input-2"
v-model="form.customer"
class="form-control"
>
<option v-for="item in customers">
{{ item.name }} - {{ item.age }}
</option>
</select>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</div>`,
data() {
return {
foods: ['rice', 'carrots', 'bread'],
customers: [
{ name: 'peter', age: 18 },
{ name: 'peter', age: 20 },
{ name: 'sara', age: 18 }
],
form: {
food: 'carrots',
customer: { name: 'peter', age: 20 }
}
}
},
methods: {
onSubmit(event) {
event.preventDefault()
// submit the form
}
}
})
new Vue({
el: "#app",
});<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<div id="app">
<edit-form/>
</div>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我可以看到您正在使用BootstrapVue，因此您可以使用B形式选择和B形式选择组件来实现您的目标。
I can see that you are using BootstrapVue, so you can use b-form-select and b-form-select-option components to achieve your goal.
这样，这是可能的。
In this way It can be possible.