Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Value binding with select options seems broken #3673

Closed
JanCVanB opened this issue Sep 14, 2016 · 0 comments
Closed

Value binding with select options seems broken #3673

JanCVanB opened this issue Sep 14, 2016 · 0 comments
Labels
bug

Comments

@JanCVanB
Copy link

JanCVanB commented Sep 14, 2016 •
edited

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
  }
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yyx990803 @LinusBorg @JanCVanB