Element: [Bug Report] change event of el-radio-group got old value unexpectedly

[bin16]

Element UI version

2.2.2

OS/Browsers version

Windows 10 Build 17115 / Chrome 64.0.3282.186

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/nullaber/uu4nvyak/

Steps to reproduce

1. go to https://jsfiddle.net/nullaber/uu4nvyak/
2. open your web console
3. click any el-radio-button
4. see console logs, you will find that the logValue print the old value

---

<!-- :value is used, not v-model -->
<el-radio-group :value="item.value" @change="logValue" v-for="item in list" ...>
...
</el-radio-button>

var Main = {
  data() {
    return {
      list: [{
        name: 'item-a, old value is 3',
        value: 3,
      }, {
        name: 'item-b, old value is 1',
        value: 1,
      }]
    }
  },
  methods: {
    logValue(value) {
      console.info(`New(???) value is ${value}`)
    }
  }
}

What is Expected?

When we click an el-radio-button in an el-radio-group, we want to get the new value of which el-radio-button we clicked

What is actually happening?

But, we get old value of the item in list

[wacky6]

You must bind as v-model or handle the input event + set the value yourself. Otherwise change event will not work.

[opiation]

@wacky6 , I would recommend documenting this v-model requirement in the radio button group examples or event description or other general components if it is more widespread. It's common to leave out v-model when using Vuex in favor of a combination of v-bind:value and v-on:change. When v-model is left out, the function bound to v-on:change is invoked with the current value, regardless of what was received in the input event.

If v-on:input is the best practice for using ElementUI with Vuex, please document this and v-on:input methods so that others starting a project with ElementUI/Vuex can save themselves some troubleshooting time.

[wacky6]

I am not sure how widespread of using change instead of input.

But, input event is a vue convention. It's already documented in vue's custom component section. Right now, we expect element developers to be familiar with vue. So from my perspective, using change to get updated component value does not make sense. In addition, change is designed to be its native counterpart, which only emits when user change / commit to the value.

[WormGirl]

You must bind as v-model or handle the input event + set the value yourself. Otherwise change event will not work.

我使用了input事件，虽然可以正确拿到当前选中的值，但是我现在需要在用户选中某个的时候阻止他选中，我所做的是不赋值，但是组件依然会导致有两个按钮选中，我该如何阻止选中事件，难道需要我记录选中之前的值，然后重置回去么，这个单选按钮组组件真的不好用，能不能考虑优化下，谢谢


bug如下图

而且就算记录之前的值重置回去，也不会触发视图更新，因为实际上当前绑定的值依然是旧值，仅仅是视图选中发生了错误

[ppisecky]

@wacky6
I had the same issue and I was going by the assumption I derived from actual vue docs:

v-model internally uses different properties and emits different events for different input elements:

• text and textarea elements use value property and input event;
• checkboxes and radiobuttons use checked property and change event;
• select fields use value as a prop and change as an event.

Furthermore with a el-select element I believe the :value and @change combination actually properly emits the new value.