v-if 未在计算 属性 上触发
v-if not triggered on computed property
我有一个 vuex 商店。在 vuex 商店中更改状态偏好。我想重新渲染 DOM。我希望每次 vuex 存储中的状态偏好更改时调用 checkValue 方法。
index.html
<div id="app">
<my-component></my-component>
<my-other-component></my-other-component>
</div>
vue已经初始化,这里也导入了store
my_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 : {},
})
组件 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>
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}
}
}
单击 li 元素时更新 vuex 存储的组件。
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>
v-if
不应包含函数调用。只是函数的存在可能会导致 v-if
始终为真。 v-if
应该测试变量或计算的 属性,并且它的名称应该是名词,而不是动词!如果 checkValue 只是代理偏好,你为什么需要它。为什么不只是 v-if="preference"
?
方法不是反应式的,
which means they will not track changes and re-run when something
changes. That's what you have computed for.
所以这意味着你需要使用一个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>
然后在原来的组件中:
<template>
<my-other-component v-for="object in objects" :object="object" :preference="preference">
<p>hello</p>
</my-other-component>
</template>
我认为你的主要问题是你的变异:VueJS 在初始化期间创建了反应性所需的一切,所以当你尝试用你的变异有效载荷用新对象覆盖它时,你的 state.components
对象已经初始化,然后将不会针对反应性进行配置(请参阅 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)。
尝试将您的突变更改为:
mutations: {
setPreference (state, payload) {
Vue.set(state.preferenceList.components, 'object_id', payload.object_id);
}
}
我有一个 vuex 商店。在 vuex 商店中更改状态偏好。我想重新渲染 DOM。我希望每次 vuex 存储中的状态偏好更改时调用 checkValue 方法。
index.html
<div id="app">
<my-component></my-component>
<my-other-component></my-other-component>
</div>
vue已经初始化,这里也导入了store
my_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 : {},
})
组件 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>
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}
}
}
单击 li 元素时更新 vuex 存储的组件。
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>
v-if
不应包含函数调用。只是函数的存在可能会导致 v-if
始终为真。 v-if
应该测试变量或计算的 属性,并且它的名称应该是名词,而不是动词!如果 checkValue 只是代理偏好,你为什么需要它。为什么不只是 v-if="preference"
?
方法不是反应式的,
which means they will not track changes and re-run when something changes. That's what you have computed for.
所以这意味着你需要使用一个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>
然后在原来的组件中:
<template>
<my-other-component v-for="object in objects" :object="object" :preference="preference">
<p>hello</p>
</my-other-component>
</template>
我认为你的主要问题是你的变异:VueJS 在初始化期间创建了反应性所需的一切,所以当你尝试用你的变异有效载荷用新对象覆盖它时,你的 state.components
对象已经初始化,然后将不会针对反应性进行配置(请参阅 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)。
尝试将您的突变更改为:
mutations: {
setPreference (state, payload) {
Vue.set(state.preferenceList.components, 'object_id', payload.object_id);
}
}