Vue UI 不会随着状态变化而更新，直到我将鼠标悬停在它上面答案

【问题标题】：Vue UI not updating with state changes, until I hover over itVue UI 不会随着状态变化而更新，直到我将鼠标悬停在它上面
【发布时间】：2021-05-29 00:31:48
【问题描述】：

我正在制作一个按钮来跟踪保存状态的变化。

当我从保存中获得成功/失败响应时，我基本上会应用一些类。这很好用。

不起作用的部分是我的按钮内的选择性文本。

   export default {
      name: "saveButton",
      components: {spinner},
      data: function() {
        return {
          hover: false
        }
      },
      props: ['handleSubmit', 'isSaving', 'saveStatus'],
      methods: {
        submit() {
          this.$emit("handleSubmit")
        },
        mouseOver(value) {
          this.hover = value;
        }
      },
      computed: {
        buttonClass() {
          if (this.saveStatus == 'success') {
            return 'save-success'
          }
          else if (this.saveStatus == 'failure') {
            return 'save-failed'
          }
          else {
            return ''
          }
        }
      }
    }
    </script>
    <template>
      <div class="settings--button-wrapper">
        <button class="btn btn--small"
                :class="buttonClass"
                type="button"
                @click="submit()"
                v-if="!isSaving"
                v-on:mouseover="mouseOver(true)"
                v-on:mouseleave="mouseOver(false)"
        >
          <span v-if="this.saveStatus == '' || this.hover">Save</span>
          <span v-if="this.saveStatus == 'failure' && !this.hover">Save failed</span>
          <span v-if="this.saveStatus == 'success' && !this.hover">Saved!</span>
        </button>
        <spinner v-if="isSaving" class="settings--spinner">
          <span>Saving...</span>
        </spinner>
      </div>
    </template>

当我得到一个失败的响应时，我的计算方法会更新我的类并且按钮变成红色。 this.saveStatus 也更新了，但是我的按钮文本仍然只显示“保存”，而不是“保存失败”。

所以这部分特别是最初没有更新：-

              <span v-if="this.saveStatus == '' || this.hover">Save</span>
              <span v-if="this.saveStatus == 'failure' && !this.hover">Save failed</span>
              <span v-if="this.saveStatus == 'success' && !this.hover">Saved!</span>

奇怪的是，当我将鼠标悬停在按钮上时，它会拾取更改，并在我将鼠标悬停在按钮上时坚持“保存失败”。

更新：我已经意识到原因是当我在点击保存后快速移开鼠标时 - v-on:mouseleave 事件实际上并没有及时捕捉到我的鼠标移开，所以我的hover 变量设置为 true - 这会保持我的“保存”文本显示。

知道为什么会发生这种情况或如何解决吗？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

所以答案原来是因为当我点击保存时，isSaving 变量启动并使按钮元素消失 - 所以没有注册 mouseleave 事件 - 这就是为什么它仍然认为它是处于悬停状态。

【讨论】：