<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)
}
}
})
I have noticed a discrepancy between the updated state in my Vuex store and the rendering of components using v-if. Despite seeing the state mutation reflected in Vue DevTools, the setup page div does not update as expected. Interestingly, navigating to a different route and returning to the page triggers an update in the component.