Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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. 
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>
                Your answer is great, but I realize that I may have phrased my question poorly. I need to apply the selected attribute inside the <option> tag conditionally. I'd like to be able to use some extra outside the values context logic to determine if the option should be preselected. See jsfiddle.net/m262un97/6. Although, now that I say this, I realize I could just simply pre-calculate the selectedFlavor and put the logic in the component. D`uh.
– rob
                Jan 23, 2018 at 18:27
                Yes, it is the way, pre-calculate the selectedFlavor.  I don't know if setting the selected attribute will reflect on the model. But calculating the selectedFlavor atribute and setting on the controller works fine.
– lmarqs
                Jan 23, 2018 at 18:48
                github.com/vuejs/vue/issues/308 seems to answer the issue  maybe it relates to this comment : github.com/vuejs/vue/issues/308#issuecomment-314248619 - this fixed my issue
– V H
                Jul 24, 2019 at 14:44
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;
<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();
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.