상태 변경으로 업데이트되지 않는 Vue UI

상태 변경으로 업데이트되지 않는 Vue UI

나는 저장 상태의 변화를 추적하기 위해 버튼을 만들고 있다.

나는 기본적으로 세이브에서 성공/실패 응답을 받았을 때 적용되는 수업이 있다.이것은 잘 작동한다.

작동이 안 되는 부분은 내 단추 안에 있는 선택 텍스트야.

   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또한 업데이트되지만, 내 버튼 텍스트에는 여전히 "Save failed"가 아니라 "Save"만 적혀 있다.

그래서 이 부분은 특히 처음에 업데이트되지 않는다.

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

이상한 점은, 내가 버튼 위로 마우스를 올리면, 그 버튼이 변경 사항을 집어들고, 내가 그 버튼에서 떨어져 있을 때 "Save failed"에 붙는다는 것이다.

업데이트: Save(저장)를 클릭한 후 마우스를 빠르게 이동할 때 문제가 발생한다는 것을 알게 되었다.v-on:mouseleave이벤트는 사실 제 시간에 내 쥐를 잡아채지 못하기 때문에hover변수가 true로 설정됨 - 'Save' 텍스트가 계속 표시됨.

왜 이런 일이 일어나는지 내가 어떻게 고칠 수 있는지 알아?

그래서 정답은 Save를 클릭할 때isSaving가변 입력 후 버튼 요소가 사라짐 - 없음mouseleave이벤트가 등록되고 있었다. 그래서 여전히 호버 상태에 있다고 생각하고 있었다.

참조URL: https://stackoverflow.com/questions/66389000/vue-ui-not-updating-with-state-changes-until-i-hover-over-it