Changing Vue Data Object

Question

UPDATED CODE

<template>
     <swiper-slide v-for="(photon,key) in $store.state.photons" :key='key'>
            <radial-gauge :value='photon.tempF'  
                 :options="photon.GaugeOptions.optionsLastTempF"></radial-gauge>
     </swiper-slide>
</template>

store.js

export const store = new Vuex.Store({
  state: {
    photons: {},
    token: '',
  },
  mutations: {
    setUser(state, value) {
      value.data.forEach(element => {
        state.photons[element.id].user = element.data    
        state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[0].to=parseInt(element.data.tempAlert,10) 
        state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[1].from=parseInt(element.data.tempAlert,10)+1 
      });
    }},
actions: {
 async getData(context) {
      let db = []
      let photon = {}
      db = await axios.get('http://13.14.13.1:3300/DB')
      db.data.forEach(item => {
        if ([Object.keys(item)[0]] in photon) {
          let dataString = (Object.values(item)[0]).split(',')
photon[Object.keys(item)[0]].GaugeOptions={}
          photon[Object.keys(item)[0]].GaugeOptions.optionsLastTempF={
            title: 'Last Temp',
            units: "°F",
            minorTicks: 10,
            majorTicks: ['0', '20', '40', '60', '80', '100', '120', '140', '160'],
            maxValue: 160,
            highlights: [{
                    "from": 0,
                    "to": 0,
                    "color": "rgba(0,255,0)"
                },
                {
                    "from":0,
                    "to": 160,
                    "color": "rgba(255,0,0)"
                },

            ],
            colorPlate: '#222',
            colorUnits: '#ccc',
            colorTitle: '#eee',
            colorNumbers: '#eee',
            width: 200,
            height: 200
          }
 context.commit('setData', photon)
    }
}
}

This code currently works if I go from the homepage to my chart page where this gauges are, but if i refresh the page the gauges have the right values but they aren't being properly update.

UPDATE so after adding a v-if to my component it now loads properly with everything. I'm now having trouble with how I would call an update function on the gauge?If i'm doing the mutation in my vuex store how would i reference my component to call an update?

Actually your parseInt() function is missing a parameter - the radix. If you don’t set the radix (aka. base) you may get numbers in a format you don’t expect in the code. It’s suggested that you always set this parameter. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt — muka.gergely, Jan 29 '19 at 08:13
Wow! I added 10 as a second parameter to all my paresInt() functions. After more fiddling I changed the optionsLastTemp to be photon.optionsLastTemp which i'm now setting in my vuex store. setUser(state, value) { value.data.forEach(element => { state.photons[element.id].user = element.data state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[0].to=parseInt(element.data.tempAlert,10) state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[1].from=parseInt(element.data.tempAlert,10)+1 }); }, — Sock Monkey, Jan 29 '19 at 14:30

score 0 · Answer 1 · answered Jan 28 '19 at 19:08

0

So, typically, Vuejs does not watch nested objects. I'd recommend that you rework you code a bit to avoid this. This should help: Vue.js - How to properly watch for nested data

Additionally, it looks like you are trying to reference the Vuex Store object, but you are using the data method rather than the computed method, so you won't get updates on that.

answered Jan 28 '19 at 19:08

Spinnaker

326
1
12

This is a simplified version of my page, I have charts and the actual gauge data is reactive. When I look at the gauge component in my dev tools I see that the data has been properly set. I think it's because i'm defining it as a method. – Sock Monkey Jan 28 '19 at 19:27
Without seeing the whole page, it's hard to say, but typically, when using Vuex, you should respond to changes in data with the `computed()` function and then you should use mutators to change it, you should not change the observed data directly in a method. – Spinnaker Jan 28 '19 at 19:32

Changing Vue Data Object

1 Answers1