v-계산된 속성에서 트리거되지 않은 경우

v-계산된 속성에서 트리거되지 않은 경우

저는 뷔엑스가 있어요.vuex 스토어의 상태 기본 설정 변경 시.DOM을 다시 렌더링하고 vuex 스토어의 상태 기본 설정이 변경될 때마다 checkValue 메서드를 호출합니다.

index.displaces를 표시합니다.

<div id="app">
    <my-component></my-component>
    <my-other-component></my-other-component>
</div>

vue가 초기화되며 스토어도 여기에 Import됩니다.

my_component.displaces

Vue.component('my-component',require('./MyComponent.vue'));
import store from "./store.js"
Vue.component('my-other-component',require('./MyOtherComponent.vue'));
import store from "./store.js"

new Vue({
    el : "#app",
    data : {},
    store,
    method : {},
})

저장 중인 상태 기본 설정 변경 시 DOM을 변경해야 하는 구성 요소

마이 컴포넌트표시하다

<template>
    <div v-for="object in objects" v-if="checkValue(object)">
        <p>hello</p>
    </div>
</template>


<script>
    methods : {
        checkValue : function(object) {
            if(this.preference) {
                // perform some logic on preference
                // logic results true or false
                // return the result
            }
        }
    },

    computed : {
        preference : function() {
            return this.$store.getters.getPreference;
        }
    }


</script>

Vuex 스토어 파일

store.displaces를 설정합니다.

const store = new Vuex.Store({
state : {
    preferenceList : {components : {}},
},
getters : {
    getPreference : state => {
        return state.preferenceList;
    }
},
mutations : {
    setPreference : (state, payload) {
        state.preference['component'] = {object_id : payload.object_id}
    }
}

vuex 저장소에서 li 요소를 클릭하면 vuex 저장소가 업데이트됩니다.

MyOtherComponent.표시하다

<div>
    <li v-for="component in components" @click="componentClicked(object)">
    </li>
</div>


<script type="text/javascript">
    methods : {
        componentClicked : function(object) {
            let payload = {};
            payload.object_id = object.id;
            this.$store.commit('setPreference', payload);
        }
    }
</script>

방법은 반응적이지 않습니다.

즉, 변경 사항을 추적하지 않고 변경 사항이 있을 때 재실행합니다.그게 당신이 계산한 겁니다.

즉, 필요한 것을 계산하기 위해 계산을 사용해야 하지만 계산에서는 매개 변수가 받아들여지지 않고 개체가 필요하기 때문에 솔루션은 개체를 속성으로 받아들이는 다른 컴포넌트를 작성한 후 로직을 수행하는 것입니다.

MyOtherComponent.vue:

<template>
    <div v-if="checkValue">
        <p>hello</p>
    </div>
</template>


<script>
    props:['object','preference']
    computed : {
        checkValue : function() {
             if(this.preference) {
               // perform some logic on preference
               // logic results true or false
               return true
             }
             
             return false
        }
    }


</script>

그리고 원래 컴포넌트에서는:

<template>
    <my-other-component v-for="object in objects" :object="object" :preference="preference">
        <p>hello</p>
    </my-other-component>
</template>

v-if에는 함수 호출을 포함할 수 없습니다.이 함수의 존재만으로 인해v-if항상 진실일 것이다. v-if변수 또는 계산된 속성을 테스트하고 동사가 아닌 명사 이름을 사용해야 합니다! checkValue가 프록시 기본 설정만 하는 경우 왜 필요한가요?왜 그냥 하지 않는 거야?v-if="preference"?

내 생각에 너의 주된 문제는 돌연변이인 것 같아.VueJS는 초기화 시 반응성에 필요한 모든 것을 생성하므로state.components변환 payload를 가진 새로운 오브젝트로 덮어쓰려고 하면 오브젝트는 이미 초기화되어 있습니다(https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats) 참조).

돌연변이를 다음과 같이 변경해 보십시오.

mutations: {
  setPreference (state, payload) {
    Vue.set(state.preferenceList.components, 'object_id', payload.object_id);
  }
}

언급URL : https://stackoverflow.com/questions/47568403/v-if-not-triggered-on-computed-property