vue-material状态更改ui更新混乱布局

Question

我有一个带提交按钮的登录表单。只要按下按钮，就会发送axios api请求。在此请求期间，按钮应被禁用，显示一个微调器。现在，我设法使用vuex相应地更新状态。现在看起来像这样：

这里发生了什么？从normal - ＆gt;过渡loading州工作得很好。但是从loading转换回来 - ＆gt; {1}}一旦api请求完成，就会在渲染引擎（不确定）重置布局并重新标记标签之前将布局大约一秒钟。

这是按钮的模板：

normal

知道如何解决这个问题吗？

Answer 1

Add key to the spans。当在具有相同名称标签的元素之间切换时，有时会发生这样的问题。

<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。但是，旋转器不会显示（与您的问题无关）。

Answer 2

由于isExecutingLogin是布尔值，请尝试使用简单的<span v-else>。

<span v-if="!isExecutingLogin">
  Login
</span>
<span v-else>
  <md-progress-spinner id="spinner" :md-diameter="20" :md-stroke="3"
                       md-mode="indeterminate"/>
</span>

从逻辑上讲，它不应该有所作为，但第二次评估可能会暂时导致两位内容一次显示。