element单选框的change事件需要点击两次才触发
用element建了一个单选框组,绑定了一个change事件,测试内容为,绑定值改变后在测试台输出“我被点击啦”,但是在测试时,第一次点击都是无效的,只有第二次开始控制台才会输出
先放源代码
<form action="welcome.php" method="POST" target="fmResult">
<div id="app">
<span>第{{round}}轮投资</span><br>
<el-radio-group v-model="radio1" @change="changelabel">
<el-radio-button label="0"></el-radio-button>
<el-radio-button label="1"></el-radio-button>
<el-radio-button label="2"></el-radio-button>
<el-radio-button label="3"></el-radio-button><br>
<el-radio-button label="4"></el-radio-button>
<el-radio-button label="5"></el-radio-button>
<el-radio-button label="6"></el-radio-button>
<el-radio-button label="7"></el-radio-button><br>
<el-radio-button label="8"></el-radio-button>
<el-radio-button label="9"></el-radio-button>
<el-radio-button label="10"></el-radio-button>
</el-radio-group><br>
</div>
</form>
<script>
new Vue({
el: "#app",
data() {
return {
radio1: '',
round: 1,
submitable: true,
isloading: false,
submitround: true
};
},
methods: {
changelabel: function (val) { //更改单选框的change事件
let that=this
console.log("我被点击啦");
that.submitable = false;
}
}
})
</script>
找了很久的资料后,结合自己的理解,觉得是因为有两个change事件,所以第一次点击没有控制台输出,但是绑定值已经发生了变化
修改后的代码,其实就是加了一个native
@change.native="changelabel"