title: How to set value from bootstrap-vue-select control to be pre-selected on form load?
body: <p>I'm using VueJS, or to be more precise <a href="https://bootstrap-vue.js.org/docs/components/form-select/" rel="nofollow noreferrer">Bootsrap-Vue (select form type)</a>.
  In the template I have the following code:</p>
  
  <pre><code>&lt;b-form-select&gt;                   
    &lt;option v-for="(selectOption, indexOpt) in item.select.options" 
           :selected="selectOption == item.select.selected ? 'selected' : ''"
           :key="indexOpt"
           :value="selectOption"
    &gt;
      {{ selectOption }} - {{ selectOption == item.select.selected }}
    &lt;/option&gt;
  &lt;/b-form-select&gt;
  </code></pre>
  
  <p>Where the corresponding data is defined as:</p>
  
  <pre><code>let item = {
    label: "some text goes here",
    inputType: 'text',
    select: {
        selected: '15',
        options: [
           '5',
           '10',
           '15',
           '20'
        ]
    }
  }
  </code></pre>
  
  <p>From the output in the UI, we can see that the condition is evaluated properly (condition for checking the item "15" is returning "true"). Here how the select control looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/ohNOK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ohNOK.png" alt="enter image description here"></a></p>
  
  <p>If I inspect the HTML it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/S75mR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S75mR.png" alt="enter image description here"></a></p>
  
  <p><strong>BUT</strong>, what I need here is, to be able during loading the control, the passed param into "<em>item.select.selected</em>" to actually show which option from the select control to be pre-select (on page loads). In many options that I tried, my select control is not selected on page load.</p>
  
  <p>Is there any way to achieve this?</p>