CODEWITHSUNDEEP
javascripthtmllaraveltwitter-bootstrapvue.js
Benjamin Beer
Benjamin Beer

Reputation: 107

Default option in <select> not showing

I am experiencing a stupid issue with a <select>. My toolchain of choice is Vue.js with Bootstrap and I am trying to create a dynamic <select> that is populated with Vue. My issue however is that the default option in the <select> is not showing, instead the form-element is blank.

This is my coding, the input group is almost identical to the example provided in the Bootstrap documentation. I also tried the suggestions mentioned in this question however they did not work.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label
        class="input-group-text"
        for="action_manufacturer_input">Manufacturer</label>
  </div>
  <select
      v-model="form.manufacturer"
      class="custom-select"
      id="manufacturer_input">
    <option disabled selected value="undefined">Please select one...</option>
    <option
        v-for="manufacturer in manufacturers"
        v-bind:value="manufacturer.id">
      {{ manufacturer.display_name }} : {{ manufacturer.full_name }}
    </option>
    <option v-on:click="toggle_input()">Add new manufacturer...</option>
  </select>
</div>

As a sanity check I removed the Bootstrap styling however that did not change anything. My question: how do I get the default selected option to show?

P.S. For what it's worth my back-end is Laravel, however I don't see how it could cause an issue.

Upvotes: 2

Views: 2003

Answers (3)

CodeConnoisseur
CodeConnoisseur

Reputation: 1879

I had a similar issue where my disabled option was not showing in a Select and the only thing that was missing was the binding of the value property on the disabled (desired default) option.

Not working:

 <option disabled value="null">Select one</option>

vs. Short hand Working:

 <option disabled :value="null">Select one</option>

Long form working:

 <option disabled v-bind:value="null">Select one</option>

Notice the value attribute is not bound to anything in the first example, thus Vue is unable to assign it.

Upvotes: 0

Cristian Incarnato
Cristian Incarnato

Reputation: 295

The v-model of your select is binded with form.manufacturer state

What is the value of form.manufacturer ?

You need to cheek that, because, Vue is searching an option that match to the value of form.manufacturer.

I have created this codepen as example

<div id="app">

  <!--Bind select value with form.category-->
  <select name="options" v-model="form.category">

    <!--Add an empty (no value) option-->
    <option :value="null">Choose a Category</option>

    <!--Add options when value is id-->
    <option v-for="category in categories" 
            :key="category.id"
            :value="category.id"
    >
      {{category.name}}
    </option>
  </select>
  <br><br>

  <!--See how the state change when option select change-->
  <div>Value of Category: {{form.category}}</div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    form:{
      category: null
    },
    categories: [
      {id: 1, name:"Category 1"},
      {id: 2, name:"Category 2"},
      {id:3, name:"Category 3"}
    ]
  }
})

Upvotes: 2

Benjamin Beer
Benjamin Beer

Reputation: 107

Thanks to @Martin who in the comments section prompted me to look elsewhere and I found it. (@Cristian Incarnato answered the question as I answered it). I have a habit from C++ of initializing all my data variables with null values. So my data variables were being set as:

  data() {
    return {
      form: {
        manufacturer: null,
      }
    };
  },

By changing the above to the following:

  data() {
    return {
      form: {
        manufacturer: "Please select one...",
      }
    };
  },

This fixed the issue. Thanks to all for the help!

Upvotes: 1

Related Questions