【vue】使用饿了么 switch开关遇到的问题
问题说明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.value = !array.value;
}
~~~
当在函数内改变了该开关的状态但switch开关显示的状态却并没有改变
解决方案
因为在本页面里使用到了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()`即可。
页:
[1]