【vue】使用饿了么 switch开关遇到的问题

gsx

问题说明
html代码
~~~html
<div v-for="value in array" :key="value.key">
    <el-switch
            :value="array.status"
        @click.native="changeSwitch(array, index)"
    >
</div>

~~~
javascript代码
~~~javascript
function changeSwitch(array,index){
        /* --code--*/
    array[index].value = !array[index].value;
}
~~~
当在函数内改变了该开关的状态但switch开关显示的状态却并没有改变

gsx

解决方案

因为在本页面里使用到了vue的v-show，在触发到v-show之后，switch开关显示的状态就改变了

所以，解决方案为

html添加以下代码

~~~html
<div style="display:none">
    <div v-show="switchOnChange">
        
    </div>
</div>
~~~

javascript添加以下代码

~~~javascript
function switchIsOnChange() {
    this.switchOnChange = !this.switchOnChange;
}
~~~

在有改变switch状态的时候调用`switchIsOnChange()`即可。