How to preselect current value in a select created

Question

I create a drop-down menu with v-repeat in Vue.js, and I have a current value where I need to add the selected property to the select tag. It seems that v-if can only be used to control tags, but not properties.

<select name="flavor">
    <option value=""></option>
    <option v-repeat="proposed_value: proposed_values" value="{{ proposed_value }}">{{ proposed_value }}</option>
</select>

I would need something like this:

<option v-repeat="proposed_value: proposed_values" 
    value="{{ proposed_value }}"
    {{ proposed_value == current_value ? 'selected' }}
>
    {{ proposed_value }}
</option>

This is the object used to create the drop-down:

{
   "name": "flavors",
   "current_value": "strawberry",
   "proposed_values": [
     "vanilla",
     "strawberry",
     "lemon"
  ]
}

Is there a way to do this that does not force me to monkey with the object like this?

{
   "name": "flavors",
   "proposed_values": [
     {"name": "vanilla", "selected": ""}
     {"name": "strawberry", "selected": "selected"}
     {"name": "lemon", "selected": ""}
  ]
}

I am using Vue 0.11.10.

Answer 1

To apply a dynamic list and apply a choice:

   new Vue({
     el: '.panel.apps',
     data: {
       apps: ['one', 'two', 'three', 'four'],
       selected: 'three'
     }
   })

The HTML selected=selected or selected shorthand is written only if the item matched the selected

<select v-model='selected'>
  <option v-for='item in apps' 
          v-bind:selected="item == selected" 
          :value="item">{{ item }}</option>
</select>

Answer 2

In Vue 2 it seems you can't set the :selected="option == test" as you would expect. I believe this is due to the nature of v-model usage. You need to expressly set your bound v-model="model.selected" to the option you expect to be pre-selected. You could do that in your mounted callback:

mounted () {

    this.model.selected = "my default";

},

In this example my option values include "my default".

Answer 3

Ran into this issue myself. Solved it with this.

<select v-model="select">
  <template v-for="option in options">
    <option v-bind:value="option" v-bind:selected="option == savedOption">{{ option }}</option>
  </template>
</select>

Answer 4

In Vue 1.0 and later you can just do this

<div id="app">
    <select v-model="selected">
        <option value="val1">Text1</option>
        <option value="val2">Text2</option>
        <option value="val3">Text3</option>
        <option value="val4">Text4</option>
        <option value="val5">Text5</option>
    </select>
</div>

and

new Vue({
    el: '#app',
    data: {
     selected: 'val3'
    }
});

So what will be the selected value in data it will be auto selected in dropdown as we set the model. I don't know if it works in older version as I have started from 1.0

note: Vue.js is awesome :)

Answer 5

I think you could do something like that:

<option v-repeat="proposed_value: proposed_values" 
    value="{{ proposed_value }}"
    selected="{{ proposed_value == current_value ? 'true' : 'false' }}"
>
    {{ proposed_value }}
</option>