vuex 상태를 기반으로 한 vuejs 구성 요소의 흐림 또는 집중도

vuex 상태를 기반으로 한 vuejs 구성 요소의 흐림 또는 집중도

Vuejs에 약간의 문제가 있어요.

제 상태는 기본적으로 이렇습니다.

  state: ()=>({
        activeSide : "from",
    }),

activeSide 값이 "from"으로 설정되어 있는지 여부에 따라 컴포넌트의 초점을 맞추거나 흐리게 하고 싶다.

현재 제 아이디어는 그다지 우아하지 않은 것 같습니다. 기본적으로 제 컴포넌트에 계산된 속성을 만들었습니다.

focusSide(){
    console.log("changed active side")
    this.$store.state.activeSide
}

그런 다음 그 물건이 변하는지 감시 장치를 설치했어요

watch:{
focusSide : function(newV,_){
  console.log("changing focus")
  newV=="from" ? this.$refs.fromArea.$el.focus() : this.$refs.fromArea.blur()
}

},

여기서의 문제는 솔루션이 우아해 보이지 않는 것 외에 워치도 작동하지 않는다는 것입니다.포커스 사이드는 값을 올바르게 변경하고 있지만(또는 적어도 메서드의 본문이 실행되어 있지 않습니다), 워처는 실행되지 않고 있기 때문에 템플릿에서 포커스 사이드 상태가 사용되지 않는다고 vuejs는 생각합니다.값이 관찰되지 않은 경우 변경되지 않는 반응 프레임워크와 같은 반응 및 변경은 필요하지 않습니다(내가 틀렸을 수도 있음).

이를 위한 이상적인 방법은 무엇일까요??감사합니다.

계산된 속성의 반환 값이 필요합니다.focusSide그렇지 않으면 항상 정의되지 않은 상태로 반환됩니다.

focusSide () {
    console.log("changed active side")
    return this.$store.state.activeSide
}

언급URL : https://stackoverflow.com/questions/52911373/how-blur-or-focus-vuejs-component-based-on-a-vuex-state