sometime select's event does't work when option's vlaue in ('',0) #4514

Closed
meilihao opened this Issue Dec 19, 2016 · 8 comments

Projects

None yet

5 participants

@meilihao

Vue.js version

2.1.6

Reproduction Link

http://sandbox.runjs.cn/show/xu7gfzz2

Steps to reproduce

switch tag option between value='' and value='0', then to see {{ selected }}'s change.

What is Expected?

the value of 'selected' always changes with your choose.

What is actually happening?

sometime works, sometime does't work.

@softomatix

Could you make reproduction on services like JS Fiddle because it is important to see the bindings but it is difficult (if not impossible) to see it from compiled template.

@meilihao

Now code is in JS Fiddle .

@LinusBorg
Member

Works perfectly for me on latest Chrome & Windows as well as OS X. Whats your setup?

@meilihao

I made reproduction in (chrome on ubuntu 16.10, chrome on windows 10, edge on windows 10).

@meilihao

After page loaded, select <option>on<option>, then select <option><option>, now {{ selected }}'s value is '0', not ''.

@meilihao

Or switch <option> between value='' and value='0' more than 3 times, you will see it also.

@rpkilby
Contributor
rpkilby commented Dec 19, 2016

@LinusBorg testing on chrome 56/OS X, I can verify that the fiddle is broken (whether or not it's Vue or the fiddle's fault, not sure).

  1. The select is initialized with "on" and the text displays "Selected: 1".
  2. Select "off".
    • Expected the selected option to be "off", text should display "Selected: 0".
    • Selected option was the empty choice, text correctly displays "Selected: 0".
  3. Select "off" again (since it's currently empty).
    • The "off" option is correctly selected, text correctly displays "Selected: 0".
  4. Select the empty choice.
    • The empty choice is correctly selected, text correctly displays "Selected: ".
  5. Select "off". Even though the current choice is empty, this breaks again.
    • Expected the selected option to be "off", text should display "Selected: 0".
    • Selected option was the empty choice, text correctly displays "Selected: 0".
  6. Select "off" again (since it's currently empty).
    • The "off" option is correctly selected, text correctly displays "Selected: 0".

I was able to fix the fiddle in two ways:

  • change the numeric values to strings.
  • change the 'empty' option to a number (such as -1).

Either vue is getting confused by having two falsey values ('', 0), or vue is getting confused by the mixed types.

@LinusBorg LinusBorg added 2.1 bug labels Dec 19, 2016
@defcc
Member
defcc commented Dec 20, 2016

Campares fails in looseEqual, I'll make a patch.

@defcc defcc self-assigned this Dec 20, 2016
@yyx990803 yyx990803 closed this in #4528 Dec 21, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment