Value binding with select options seems broken #3673
Description
I'm learning Vue by working through the 2.0 guide, and when I created vuejs/v2.vuejs.org#404 in the vuejs.org repo, @LinusBorg said the issue might actually be with Vue.js itself.
Vue.js version
2.0.0-rc.5
Reproduction Link
My code is here: https://github.com/jvanbrug/vue-guide-examples/tree/master/08_Form_Input_Bindings/02_Value_Bindings
The live demo of that code is here: https://jvanbrug.github.io/vue-guide-examples/08_Form_Input_Bindings/02_Value_Bindings/index.html
Steps to reproduce
When I try to implement the 2.0 guide's example for Form Input Bindings - Value Bindings - Select Options (would provide a link, but vuejs.org seems to be down at the moment) as below, I get vm.selected === undefined whenever I select any option (also, the first option, 123, always appears "checked" in the dropdown).
What is Expected?
The options for 456 or 789 should be selectable, and vm.selected should change to something like { number: 456 }.
What is actually happening?
I'm setting vm.selected === undefined as the initial value, but that doesn't seem to change the behavior - even if vm.selected === null is the initial value, selecting a select option changes it to vm.selected === undefined.
Thanks for Vue! 😃 So far it seems super useful and easy to use.
index.html
<body>
<div class="content">
...
<div id="example-select" class="demo">
<select v-model="selected">
<option v-bind:value="{ number: 123 }">123</option>
<option v-bind:value="{ number: 456 }">456</option>
<option v-bind:value="{ number: 789 }">789</option>
</select>
<div>
Selected type: {{ typeof selected }}
</div>
<div>
Selected number: {{ typeof selected === 'object' ? selected.number : 'N/A' }}
</div>
</div>
...
</div>
<script src="../../vue.js"></script>
<script src="./main.js"></script>
</body>main.js
...
var vm = new Vue({
el: '#example-select',
data: {
selected: undefined
}
})