2.0 example for Value Binding with Select Options seems broken

JanCVanB commented 8 years ago

I'm learning Vue by working through the 2.0 guide, so this is likely my mistake.

When I try to implement the Form Input Bindings - Value Bindings - Select Options example as below, I get vm.selected === undefined whenever I select any option (also, the first option, 123, always appears "checked" in the dropdown).

I'm using Vue.js v2.0.0-rc.5

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

Thanks for Vue, Vuejs.org, and any help with this! 😃

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
  }
})

LinusBorg commented 8 years ago

Hi @jvanbrug,

this seems to be broken, indeed. Thanks for the report, we will take a look shortly.

LinusBorg commented 8 years ago

Oh, you filed this under the wrong repository. This does not seem like a bug with the website but Vue itself.

Can you open this issue again unter /vuejs/vue ?

Thank you!

JanCVanB commented 8 years ago

@LinusBorg oh wow, figured it had to be my mistake or a documentation bug - will do!

LinusBorg commented 8 years ago

Well, as far as I know, the functionality described there should work that way, but it doesn't.

I may be wrong, but an issue on the Vue repo is a good start to investigate.

JanCVanB commented 8 years ago

@LinusBorg hopefully we're able to resolve the issue over there!

JanCVanB commented 8 years ago

@LinusBorg It looks like it was resolved. Thanks!

JanCVanB commented 8 years ago

Are there any plans to include more "live demos" or JSFiddle components in the documentation/guide? Executing the example code snippets in live demos might prevent future discrepancies between examples and reality.

chrisvfritz commented 8 years ago

@jvanbrug Yes, we've actually already added many more live demos to the 2.0 docs and will continue to do so. PRs are welcome if there's something in particular you'd like to see a live demo for. 😃

vuejs / v2.vuejs.org

2.0 example for Value Binding with Select Options seems broken #404