How to conditionally set selected option in Vue

Question

Is it possible to pre-set a select box's selected value?

Using Vue (v2), I have tried to create a select box like this inside a Vue template.

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           :selected="selectedFlavor == flavor">{{ flavor }}</option>
</select>

And a component like this:

Vue.component('flavor-pane', {
      ...
      data: function() {
          selectedFlavor: 'strawberry',
          flavors: ['blueberry', 'lime', 'strawberry'],
      });
}

Essentially, the idea is that I need to loop through a simple array, create several options in a select box, and set the select box's value to an existing value. Can I do this?

My templates/components are rendering fine, but the selected attribute doesn't seem to appear in the HTML even when the condition is met and there is no value selected in the select box.

Answer 1

Yes, it is possible. I've created this example https://jsfiddle.net/Luvq9n4r/2/ to help you. To change the value selected just set the model. If it isn't what you need, please, make a fiddle too.

Thank you.

new Vue({
  el: '#app',
  data: function() {
    return {
      selectedFlavor: 'lime',
      flavors: ['blueberry', 'lime', 'strawberry']
    }
  },
  methods: {
    change: function() {
      this.selectedFlavor = 'strawberry';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="change()">Set Strawberry</button>
  <select v-model="selectedFlavor">
    <option v-for="flavor in flavors" :value="flavor">{{flavor}}</option>
  </select>
</div>

Answer 2

You were on the right track using v-model and selectedFlavor on the select. Doing so binds the value of the select box to the value of selectedFlavor. When you change the value of selectedFlavor you change the value of the select element. This works both ways; ie. if you change the select box you'll also change the value of selectedFlavor (ie two-way data binding, reactivity).

Changing the value of the select element also changes which option element has the selected attribute. You can use this v-model data binding to achieve your goal, but this is only a functionally equivalent result. Your use case may differ.

If you can change the value of the select box using this method then setting the initial value of selectedFlavor in the data object will achieve your goal of setting a default value of the select box and therefore which option element has the selected attribute.

You can change the value of the select box by changing the value of the data model you bind to either directly or (preferably) through some sort of state management like Vuex. State management answers your larger question around managing the state of the select based on dynamic data from other events, data sources, API's, web sockets, etc...

I'm directly modifying the value of selectedFlavor below only to highlight the basic concept, but I also tried to hint at what this might look like within a state management paradigm.

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           @change="onChangeFlavour"
           >{{ flavor }}</option>
</select>

new Vue({
  el: '#app',
  data() {
    return {
      selectedFlavor: 'lime', // Default value is set here
      flavors: ['blueberry', 'lime', 'strawberry']
    }
  },
  methods: {
    onChangeFlavour(event) {
      // do what you want with the new value when the select box is changed
      console.log(event.srcElement.value);
      // OR preferably
      console.log(this.selectedFlavor); // because binding
    },
    setFlavour(newFlavour){
      // change the value
      this.selectedFlavor = newFlavour;
    }
  }
});

Answer 3

You can use jquery with vue to select an option online.

1. Include jquery

window.$ = require('jquery');
window.JQuery = require('jquery');

2. HTML/PHP update
Add the data-selected field in select tag.

<select v-model="company" name="company" data-selected="{{ $document->company_id }}">
   <option value="{{ $company->id }}">{{ $company->name }}</option>
</select>

3. Vue Update

const app = new Vue({
   el: '#app',
   data: {
      company: '',
      companies: '',
   }
   methods: {
      getCompanies: function () {
         axios.post('/company/getdata').then(function (response) {
            app.companies = [];
            app.companies = response.data;

            // Check if .editCompany is present. 
            if ($('.editCompany').length > 0) {
               app.company = $('.editCompany').data('selected');
            }
         }).catch(error => console.log(error));
      },
   },
   created: function () {
      this.getCompanies();
   }
});