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

[justfn]

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的值

[yyx990803]

说了一定要有链接。

[justfn]

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

[posva]

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

[justfn]

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

[Plasmatium]

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]

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