vue-material 状态更改 ui 更新弄乱了布局答案

【问题标题】：vue-material state change ui update messing with layoutvue-material 状态更改 ui 更新弄乱了布局
【发布时间】：2018-07-13 06:05:43
【问题描述】：

我有一个带有提交按钮的登录表单。只要您按下按钮，就会发送 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>

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

【问题讨论】：

用 CSS 检查器检查元素上的position，看看它是否改变
@Ohgodwhy 在 spinner-span 再次消失之前，两个组件在短时间内可见。

标签： vue.js vuejs2 css-transitions vue-material

【解决方案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。但是，微调器不会显示（与您的问题无关）。

【讨论】：

【解决方案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>

从逻辑上讲，它不应该产生影响，但也许第二次评估会短暂地导致这两个内容位同时可见。

【讨论】：