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

Question

我正在制作一个按钮来跟踪保存状态的变化。
当我从保存中获得成功/失败响应时，我基本上会应用一些类。这工作正常。
不起作用的部分是我的按钮内的选择性文本。

   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 - 这会保持我的“保存”文本显示。
知道为什么会发生这种情况或如何解决吗？

Answer 1

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