[vue.js] 계산 된 속성에서 $ refs 사용

Program / 글쓴이

$refsComputed 내부에 어떻게 액세스 합니까? 계산 된 속성이 처음 실행될 때는 항상 정의되지 않습니다.

답변

여기서 내 질문에 답하려고하는데 다른 곳에서는 만족스러운 답을 찾을 수 없었습니다. 때로는 계산을 수행하기 위해 dom 요소에 액세스해야하는 경우도 있습니다. 다른 사람들에게 도움이되기를 바랍니다.

컴포넌트가 마운트되면 Vue를 속여 계산 된 속성을 업데이트해야했습니다.

Vue.component('my-component', {
    data(){
        return {
            isMounted: false
        }
    },
    computed:{
        property(){
            if(!this.isMounted)
                return;
            // this.$refs is available
        }
    },
    mounted(){
        this.isMounted = true;
    }
})

답변

Vue js 가이드 를 인용하는 것이 중요하다고 생각합니다 .

$ ref는 구성 요소가 렌더링 된 후에 만 ​​채워지며 반응하지 않습니다. 이는 직접적인 자식 조작을위한 이스케이프 해치로만 사용됩니다. 템플릿이나 계산 된 속성 내에서 $ ref에 액세스하지 않아야합니다.

따라서 항상 자신의 방식을 해킹 할 수 있지만해야 할 일은 아닙니다.

답변

$refs애프터가 필요한 경우 후크를 v-if사용할 수 있습니다 updated().

<div v-if="myProp"></div>


updated() {
    if (!this.myProp) return;
    /// this.$refs is available
},

답변

나는 방금이 같은 문제를 가지고 왔고 이것이 계산 된 속성이 작동하지 않는 상황 유형이라는 것을 깨달았습니다.

현재 문서 ( https://vuejs.org/v2/guide/computed.html ) 에 따르면 :

“[…] 계산 된 속성 대신 메서드와 동일한 기능을 정의 할 수 있습니다. 최종 결과에 대해 두 가지 접근 방식은 실제로 동일합니다. 그러나 계산 된 속성은 반응 형에 따라 캐시된다는 점이 다릅니다. 종속성. 계산 된 속성은 일부 반응 종속성이 변경된 경우에만 재평가됩니다. “

따라서 이러한 상황에서 (아마) 발생하는 것은 구성 요소의 마운트 된 수명주기를 완료하고 참조를 설정하는 것이 계산 된 속성의 종속성에 대한 반응 적 변경으로 간주되지 않는다는 것입니다.

예를 들어, 제 경우에는 ref 테이블에 선택된 행이 없을 때 비활성화해야하는 버튼이 있습니다. 따라서이 코드는 작동하지 않습니다.

<button :disabled="!anySelected">Test</button>

computed: {
    anySelected () {
      if (!this.$refs.table) return false

      return this.$refs.table.selected.length > 0
    }
}

할 수있는 일은 계산 된 속성을 메서드로 바꾸는 것입니다. 그러면 제대로 작동합니다.

<button :disabled="!anySelected()">Test</button>

methods: {
    anySelected () {
      if (!this.$refs.table) return false

      return this.$refs.table.selected.length > 0
    }
}

답변

저와 같은 다른 사용자는 데이터를 prop에 전달하기 만하면 data됩니다.computed

Vue.component('my-component', {
    data(){
        return {
            myProp: null
        }
    },
    mounted(){
        this.myProp= 'hello'
        //$refs is available
        // this.myProp is reactive, bind will work to property
    }
})

답변

원하는 경우 속성 바인딩을 사용합니다. : disabled prop은이 경우 반응합니다.

<button :disabled="$refs.email ? $refs.email.$v.$invalid : true">Login</button>

그러나 두 필드를 확인하기 위해 더미 방법으로 다른 방법을 찾지 못했습니다.

<button
    :disabled="$refs.password ? checkIsValid($refs.email.$v.$invalid, $refs.password.$v.$invalid) : true">
            {{data.submitButton.value}}
</button>

methods: {
   checkIsValid(email, password) {
      return email || password;
   }
}

답변