javascript - Vue组件不更新状态更改
问题描述
<div v-for="(photon, key) in $store.state.notConnected" v-bind:key="key">
<div v-if="!photon.connected">
<p>Photon is not Connected</p>
</div>
<div v-if="photon.connected">
<p>Photon is Connected</p>
<b-btn v-on:click="showNewSetup(photon)>Setup</b-btn>
</div>
<div v-if="photon.showSetup">Setup Page</div>
</div>
Store.js
export const store = new Vuex.store({
state:{
notConnected:{}
},
mutations:{
setDevices(state,value){
value.data.forEach(ele =>{
state.notConnected[ele.id]={}
state.notConnected[ele.id].showSetup=false
state.notConnected[ele.id].connected=ele.connected
}
},
SHOWNEWSETUP(state,value){
state.notConnected[value.id].showSetup=true
}}
actions:{
async getDevices(context){
let devices = await axios.get('http:10.10.10.1:3000/api')
context.commit('setDevices',devices)
}
}
})
我正在改变我的 vuex 商店中的状态,但 v-if 不反映更新的状态。当我打开 vue 开发工具时,我看到发生了突变并且可以看到状态已经改变,但是设置页面 div 没有更新。
注意:如果我转到不同的路线并返回到组件更新的页面
解决方案
Vue 没有机会检测到 Arrays 的变化(支持代理的 vue3 除外)。
这就是为什么您应该将您的突变更改为:
SHOWNEWSETUP(state,value){
Vue.set(state.notConnected, value.id, {showSetup=true})
}
这样一来,Vue 的反应系统就会获悉变化,并且一切都应该按预期工作。
推荐阅读
- swift - UICollectionViewCell imageView 不滚动就不会加载
- python - 在使用 Flask uwsgi 提供 PIL 图像时尝试隐式序列转换
- php - 如何使用不同的ip克隆另一个数据库中另一个表中的数据表
- javascript - RecipeId 未定义
- spring-boot - 如何在apache生成的日志中隐藏敏感数据
- swift - 关闭 MainScreen 视图控制器
- visual-studio-code - VSCode:我想更改文本颜色(不是背景颜色,只是文字颜色),我应该编辑哪个配置文件?
- scala - 如何区分参数类型?
- c - 你可以给宏设置一个字符串吗
- react-native - 在 feathersjs 中上传文件时出现错误 500(一般错误)