How select specific option in select-box, which option has an object in its value on Vue?

Question

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/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="app"> <edit-form/> </div>

Answer 1

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.

 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"> <b-form-select v-model="form.customer" required> <b-form-select-option v-for="item in customers" :value="item"> {{ item.name }} - {{ item.age }} </b-form-select-option> </b-form-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: 18 }, } } }, methods: { onSubmit(event) { event.preventDefault() // submit the form } } }) new Vue({ el: "#app", });

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="app"> <edit-form/> </div>

Answer 2

In this way It can be possible.

 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" value="form.customer" class="form-control" > <option v-for="item in customers" value="item" :selected="JSON.stringify(item) === JSON.stringify(form.customer)" > {{ 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/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="app"> <edit-form/> </div>