1

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

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

4

2 回答 2

3

添加keyspans。在具有相同名称标签的元素之间切换时,有时会发生此类问题。

<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. 但是,微调器不会显示(与您的问题无关)。

于 2018-02-02T19:42:51.727 回答
0

由于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>

从逻辑上讲,它不应该有所作为,但也许第二次评估会短暂地导致两位内容同时可见。

于 2018-02-02T18:51:29.033 回答