Vue.js v-如果未在计算属性上触发

我有一家vuex商店。在vuex存储中更改状态首选项时。我想重播DOM。我希望每次vuex存储中的状态首选项更改时都调用checkValue方法

index.html

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

在存储区中更改状态首选项时需要更改DOM的组件

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

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

单击li元素时更新vuex存储的组件

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

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

方法：{
组件：函数（对象）{
让有效载荷={}；
payload.object_id=object.id；
这是.store.commit（'setPreference'，payload）；
}
}

v-if

不应包含函数调用。仅函数的存在就可能导致

v-if

始终为真

v-if

应该测试一个变量或一个计算属性，它应该有一个名词而不是动词的名称！如果checkValue只是代理首选项，为什么需要它。为什么不仅仅是

v-if=“preference”

？

方法不是被动的，这意味着它们不会跟踪更改并在某些更改时重新运行。这就是你计算的结果

因此，这意味着您需要使用computed来计算所需内容，但computed不接受参数，您需要对象，因此解决方案是创建另一个组件，该组件接受对象作为属性，然后在此执行逻辑：

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>

你好

道具：['object'，'preference']
计算：{
checkValue:function（）{
如果（此选项）{
//对偏好执行一些逻辑
//逻辑结果是真还是假
返回真值
}
返回错误
}
}

然后在原始组件中：

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

你好

我认为您的主要问题是您的变异：VueJS在初始化过程中创建了反应所需的一切，因此您的

状态。当您尝试使用带有变异负载的新对象覆盖它时，组件

对象已经初始化，然后将不会配置反应（请参阅）

尝试将您的突变更改为：

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

---

你试过用

v-show

代替

v-if

吗？没有。我要求v-if（类似行为）您忘记在computed属性中返回值，因此应该

返回此值。$store.getters.getPreference1。您需要像@VamsiKrishna建议的那样从计算中返回。2.为什么需要
checkValue
如果只使用
首选项
，为什么不直接使用计算值？@fatman我删除了一些代码，简要介绍了问题。我想做的是，每当状态首选项改变时，我都需要计算方法checkValue中的一些逻辑。checkvalue根据逻辑返回true或false。我需要在checkvalue中执行一些逻辑。我已经更新了问题。是的。显然，使用名词还是动词取决于您，但您需要将其放在computed中，而computed函数不接受参数。你可能错过了一个重要的环节<代码>v-如果

位于“渲染”侧。您无法控制它何时运行。这不是你调用的方法。当源数据发生变化时，它会作出“反应”。计算属性相同，因此可以在v-if中使用计算属性。也正因为这个原因，名词能产生更好的名字。方法不是这样的。当你打电话给他们时，他们就会运行，所以他们通常会在“更新”端找到，将更改返回到你的存储中。