title: VueJS bind select to object but still POST string
body: <p>What is the correct way to bind a select element to an object (rather than a string value) but still have the HTML element submit a string value?</p>
  
  <p>I've managed to get this working, but it almost seems like I'm exploiting a bug:</p>
  
  <pre><code>&lt;select v-model="selected" v-on:change="price=selected.price"&gt;
      &lt;option v-for="item in items" v-bind:value="item" value="{{ item.id }}"&gt;{{ item.name }}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This works as intended: the "selected" property is attached to the "item" object, but the form POSTs just the item's ID. However, if I reverse the order of the HTML attributes, so that value={{ item.id }} comes before v-bind:value="item", then the form POSTs "[Object]" rather than, e.g., "3". </p>
  
  <p>The fact that it's so fragile makes me think I'm doing something wrong.</p>
  
  <p>So what's the right way to handle this?</p>