v-mode 在 <select> 上的表现异常 #6112

justfn · 2017-07-14T13:34:36Z

Version

2.4.1

Reproduction link

https://jsfiddle.net/chrisvfritz/50wL7mdz/没有链接

Steps to reproduce

`

<div id="slct">
  <select  v-model="slct">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ slct }}</span>
</div>

new Vue({
  el : '#slct',
  data : {
    slct : '1',
  },
  mounted : function(){
    var that = this;
    setTimeout(function(){
      that.slct = '11';
    },1000);
  },
});

初始可渲染出'1',但1秒后变成空了,
通过watch 'slct' 发现,它被改了两次(自己改为'11',然后又被改为undefined),
算是bug吗?

`

What is expected?

初始 slct 被改为undefined,
或者当改变slct时不被改变成undefined

What is actually happening?

未出现期望的两种情况之一.
当无选项被选中时,select的值都被改成undefined,
或者当无选项被选中时,都不改赋予select的值

The text was updated successfully, but these errors were encountered:

yyx990803 · 2017-07-14T14:44:04Z

说了一定要有链接。

justfn · 2017-07-14T15:41:16Z

@.@ 网速太慢...., 终于知道怎么连接了
这里是链接

posva · 2017-07-14T17:01:53Z

FYI this is also what happens in other situations (eg v-model.number): https://jsfiddle.net/07r5ctzw/

justfn · 2017-07-15T02:28:47Z

初始值 n和slct 不符合要求,但都保持了初始值( '1' 和 'aa')
当改变 n和slct 时,两个值仍不符合要求,但 n 保持了赋给的值'bb',而 slct 则被强制改为了 undefined (而非'11')
我想说的是,既然选项中都没有合适的值,为什么初始可以存在,但改变后就不能存在了(被强行改成了undefined),这也和 v-model.number 表现不一致(值没有被强行改为undefined)
https://jsfiddle.net/07r5ctzw/2/

Plasmatium · 2017-07-19T02:47:10Z

Hi @jstcodes ,

如果用v-model绑定的话，option里如果没有找到和slct相等的值，就会把slct置undefined。slct被置undefined是无法避免的，但是你可以把span标签里的值绑定为其他，比如称作label，并且设置一个watcher来监控slct，如果slct改变，且不是变成undefined，就跟着一起变，如果slct变成undefined，就不理睬，label保持原样。https://jsfiddle.net/Plasmatium/50wL7mdz/48019/

If you using v-model, slct will be set to undefined if the value is not found in option tag. You can't change this behivor. But you may bind another varible to span tag, (eg. label), and make a watcher. Watch on slct, if it changes to a non undefined value, set label to this value. If slct changes to undefined, remains label to unchang.

justfn · 2017-07-19T14:31:17Z

Hi @Plasmatium ,
感谢,该方法可以作为决解问题的方法之一,
在项目中异步获取 slct 和 _option选项集_时,我将 select的赋值放在了两个异步操作之后进行也可以避免,只是出现了这个问题有点疑惑,既然 被置undefined是无法避免的 那只能通过其他方式来避免了,thank you

close #6112

yyx990803 closed this as completed Jul 14, 2017

yyx990803 reopened this Jul 14, 2017

yyx990803 closed this as completed in c90b140 Jul 19, 2017

yyx990803 added a commit that referenced this issue Jul 19, 2017

fix(v-model): use stricter check for <select> option update

c70addf

close #6112

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v-mode 在 <select> 上的表现异常 #6112

v-mode 在 <select> 上的表现异常 #6112

justfn commented Jul 14, 2017 •

edited

yyx990803 commented Jul 14, 2017

justfn commented Jul 14, 2017 •

edited

posva commented Jul 14, 2017

justfn commented Jul 15, 2017 •

edited

Plasmatium commented Jul 19, 2017 •

edited

justfn commented Jul 19, 2017 •

edited

v-mode 在 <select> 上的表现异常 #6112

v-mode 在 <select> 上的表现异常 #6112

Comments

justfn commented Jul 14, 2017 • edited

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

yyx990803 commented Jul 14, 2017

justfn commented Jul 14, 2017 • edited

posva commented Jul 14, 2017

justfn commented Jul 15, 2017 • edited

Plasmatium commented Jul 19, 2017 • edited

justfn commented Jul 19, 2017 • edited

justfn commented Jul 14, 2017 •

edited

justfn commented Jul 14, 2017 •

edited

justfn commented Jul 15, 2017 •

edited

Plasmatium commented Jul 19, 2017 •

edited

justfn commented Jul 19, 2017 •

edited