Element: [Bug Report] programming mode, set the value of el-switch can not be synchronized to its generated HTML form input control

[zxz054321]

Element UI version

1.4.1

OS/Browsers version

Ubuntu 16.04 / Firefox 54.0

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/zj3tt3o0/2/

Steps to reproduce

1. 页面加载完成，data函数中this.form.delivery的初始值是为false；
2. mounted()函数中将this.form.delivery更改为true，更改有反映到UI上；
3. 点击按钮提交表单。

What is Expected?

el-switch所生成的checkbox input的值应为on

What is actually happening?

el-switch所生成的checkbox input的值并没有同步更新为on，其值只有通过鼠标点击才会更新到input上

[element-bot]

Translation of this issue:

Element UI version

1.4.1

OS/Browsers version

Ubuntu 16.04 / Firefox 54

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/zj3tt3o0/2/

Steps to reproduce

The 1. page is loaded. The initial value of the this.form.delivery in the data function is false;

The 2. mounted () function changes the this.form.delivery to true, and the changes are reflected on the UI;

1. click the button to submit the form.

What is Expected?

The value of the checkbox input generated by el-switch should be on

What is actually happening?

The value of the checkbox el-switch generated by input is not updated to on synchronously, and its value is updated to input only by mouse click

[Leopoldthecoder]

为何要去取 input 的值？

[zxz054321]

@Leopoldthecoder 在做SPA的时候大家会在vue中用axios之类的库跟API通讯，此时这个bug无影响。但如果vue仅仅负责view渲染，表单依旧采用传统的form GET/POST跳转提交到服务端，input的值就很重要了。

[openks]

@zxz054321 我刚看了下你的demo试了下 可以取到值 且为on啊
我直接打开页面搜索el-switch__input找到这个对象 添加id
然后根据id 获取对象查看值为on
下载源代码到本地，服务器打开查看值也是on

[zxz054321]

@openks JS输出有值不等于HTTP请求里有，抓包HTTP请求：

A 直接点击按钮而不点el-switch，HTTP请求参数里没有delivery

B 点击两次el-switch使其关闭再开启，再点击按钮提交表单，HTTP请求参数里才有delivery

[wacky6]

input checkbox 应该用 checked 而不是value

[openks]

@zxz054321 可能跟这个 #6011 有关

[zxz054321]

@wacky6 是的，但是通过js设置model值时，el-switch不会将更改同步到checked属性上，目前只能手动 this.$refs.switch.$el.getElementsByTagName('input')[0].checked=true

[wacky6]

修复PR https://github.com/ElemeFE/element/pull/6205