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

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"
          
        >
          <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>

CodePudding user response：

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/[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>

CodePudding user response：

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"
          
        >
          <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/[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>