element plus switch组件change事件初次渲染就会触发解决方案

5,592 阅读1分钟

为什么change事件在初次渲染就会触发,期间没做啥操作,就接口取了个值,我的代码如下

html部分代码如下所示

<el-switch
  v-model="scope.row.status"
  :inactive-value="1"
  :active-value="0"
  @change="handleStatusChange(scope.row)"
/>

javascript部分代码如下所示

function handleStatusChange(row) { 
  console.log(1) 
} 

经过思考大概可能是scope.row.status的值是string类型,即接口返回的这一行的这个值是string类型,然后:active-value:inactive-value是绑定的number类型的1跟0,这其中存在类型转变,string类型转变成number类型,@change识别到了这个转变,所以触发了这个方法,可以去掉:inactive-value:active-value前面的“:”符号这样就可以避免类型转换,从而避免初次渲染触发这个事件,代码如下:

<el-switch
  v-model="scope.row.status"
  inactive-value="1"
  active-value="0"
  @change="handleStatusChange(scope.row)"
/>