web-dev-qa-db-fra.com

v-si non déclenché sur la propriété calculée

J'ai un magasin vuex. en cas de changement d’état dans le magasin vuex. Je veux rendre le DOM. Je veux que la méthode checkValue soit appelée à chaque fois que la préférence d'état dans le magasin de vuex change.

index.html

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

la vue est initialisée et le magasin est importé ici

mon_component.js

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 : {},
})

composant où DOM doit être modifié lors du changement de préférence d'état en magasin

MonComponent.vue

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

Fichier magasin Vuex

store.js

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

composant à partir duquel le magasin vuex est mis à jour en cliquant sur l'élément li.

MyOtherComponent.vue

<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>
vue.jsvuex
4
Tomonso Ejang

Les méthodes ne sont pas réactives, ce qui signifie qu'elles ne suivront pas les changements et ne seront pas réexécutées lorsque quelque chose change. C'est ce que vous avez calculé.

Cela signifie donc que vous devez utiliser un calcul pour calculer ce dont vous avez besoin, mais calcule n'accepte pas les paramètres et vous avez besoin de l'objet. La solution consiste donc à créer un autre composant qui accepte l'objet en tant que propriété, puis à exécuter la logique à cet endroit:

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>

Et puis dans le composant d'origine:

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

v-if ne doit pas contenir d'appel de fonction. La seule existence de la fonction entraînera probablement que le v-if sera toujours vrai. v-if devrait tester une variable ou une propriété calculée, et le nom devrait être un nom, pas un verbe! Si checkValue se limite aux préférences des mandataires, pourquoi en avez-vous besoin? Pourquoi ne pas simplement v-if="preference"?

2
bbsimonbb

Je pense que votre problème principal est votre mutation: VueJS crée tout ce dont il a besoin pour la réactivité lors de l’initialisation. Votre objet state.components est déjà initialisé lorsque vous essayez de le remplacer par un nouvel objet avec votre charge de mutation, qui ne sera alors pas configuré pour la réactivité ( voir https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats ).

Essayez de changer vos mutations en:

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