作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个带有提交按钮的登录表单。只要按下按钮,就会发送 axios api 请求。在此请求期间,按钮应该被禁用并显示微调器。现在,我设法使用 vuex 相应地更新状态。现在看起来像这样:
这里发生了什么?从 normal
-> loading
状态的转换工作得很好。但是,一旦 api 请求完成,从 loading
-> normal
转换回来会使布局困惑一秒钟左右,然后渲染引擎(不确定)重置布局并重新居中标签。
这是我的按钮模板:
<md-button @click.prevent="onBtnLoginClicked"
class="md-raised md-primary"
:disabled="isExecutingLogin">
<span v-if="!isExecutingLogin">
Login
</span>
<span v-else-if="isExecutingLogin">
<md-progress-spinner id="spinner" :md-diameter="20" :md-stroke="3"
md-mode="indeterminate"/>
</span>
</md-button>
知道如何解决这个问题吗?
最佳答案
Add key
to the span
s .在具有相同名称标签的元素之间切换时,有时会发生此类问题。
<md-button @click.prevent="onBtnLoginClicked"
class="md-raised md-primary"
:disabled="isExecutingLogin">
<span v-if="!isExecutingLogin" key="login">
Login
</span>
<span v-else-if="isExecutingLogin" key="spinner">
<md-progress-spinner id="spinner" :md-diameter="20" :md-stroke="3"
md-mode="indeterminate"/>
</span>
</md-button>
Codesandbox -- 代码在 components/App.vue
中。不过,微调器不会显示(与您的问题无关)。
关于vue.js - vue-material state change ui update 弄乱了布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48587752/
我是一名优秀的程序员,十分优秀!