title: How to preselect current value in a select created with v-repeat in Vue.js?
body: <p>I create a drop-down menu with <code>v-repeat</code> in Vue.js, and I have a current value where I need to add the <code>selected</code> property to the <code>select</code> tag. It seems that <code>v-if</code> can only be used to control tags, but not properties.</p>
  
  <pre><code>&lt;select name="flavor"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option v-repeat="proposed_value: proposed_values" value="{{ proposed_value }}"&gt;{{ proposed_value }}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I would need something like this:</p>
  
  <pre><code>&lt;option v-repeat="proposed_value: proposed_values" 
      value="{{ proposed_value }}"
      {{ proposed_value == current_value ? 'selected' }}
  &gt;
      {{ proposed_value }}
  &lt;/option&gt;
  </code></pre>
  
  <p>This is the object used to create the drop-down:</p>
  
  <pre><code>{
     "name": "flavors",
     "current_value": "strawberry",
     "proposed_values": [
       "vanilla",
       "strawberry",
       "lemon"
    ]
  }
  </code></pre>
  
  <p>Is there a way to do this <strike>that does not force me to monkey with the object like this?</p>
  
  <pre><code>{
     "name": "flavors",
     "proposed_values": [
       {"name": "vanilla", "selected": ""}
       {"name": "strawberry", "selected": "selected"}
       {"name": "lemon", "selected": ""}
    ]
  }
  </code></pre>
  
  <p></strike>
  I am using Vue 0.11.10.</p>