CODEWITHSUNDEEP
javascriptvue.jsvuejs2storevuex
florian
florian

Reputation: 696

vue.js 2 view not refreshing after data change in Vuex store

Hi I try to create a table to track validation status for several items.

The vue xstore:

  mutations: {
...,
    set_scaninfos: function (state, scaninfos) {
      Vue.set(state, 'scaninfos', scaninfos)
    }
  },
  actions: {
...,
    setScanInfo (store, scinfo) {
      store.commit('set_scaninfos', scinfo)
    }
  },

The component - first I initialize the scaninfos in the vuex store:

 initScanInfos () {
   var scanIds = this.$store.state.scanids
   console.log(this.$store.state.scanids.length)
   for (var i = 0; i < scanIds.length; i++) {
     this.scaninfos[scanIds[i]] = Object.assign({}, this.ruleForm)
   }
   this.$store.dispatch(‘setScanInfo’, this.scaninfos)
 }

},

When updates arrive I push them like this:

  saveForm (formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        console.log('form valid!')
        this.ruleForm.validated = true
        var scanId = this.$store.state.scanids[this.scanindex]
        this.scaninfos[scanId] = Object.assign({}, this.ruleForm)
        this.$store.dispatch('setScanInfo', this.scaninfos)
        this.saveSuccess()
      } else {
        console.log('error: form invalid!!')
        this.ruleForm.validated = false
        this.saveFail()
        return false
      }
    })
  },

I present the data like this:

computed: {
  scanId () {
    var pId = this.$store.state.scanids[this.scanindex]
    return pId
  },
  scinfo () {
    var scinfo = this.$store.state.scaninfos
    return scinfo
  }

HTML:

    <table class="scantable">
        <tr>
            <th>scan</th>
            <th>validation</th>
        </tr>
        <tr v-for="scanid in $store.state.scanids">
            <td>{{ scanid }}</td>
            <td>
                <i v-show="!scinfo[scanid].validated" class="el-icon-close"></i>
                <i v-show="scinfo[scanid].validated" class="el-icon-check"></i>
            </td>
        </tr>
    </table>

Data arrives at the store in the correct format. However the view does not refresh when the vuex store changes. How can I fix this? What am I doing wrong?

PS:

My data is a pretty ugly nested JSON dict:

{ "Ex1": { "pseudonym": "asd", "yob": "2009-12-31T23:00:00.000Z", "scanmonth": "2018-01-31T23:00:00.000Z", "gender": "male", "therapy": "sda", "doa": "alive", "diagnosis": "shanghai", "mgmt": "unmethylated", "validated": true, "survival": 1, "karnofsky": 10, "ki67": 1 }, "Ex2": { "pseudonym": "asdsad", "yob": "2010-12-31T23:00:00.000Z", "scanmonth": "2018-02-28T23:00:00.000Z", "gender": "male", "therapy": "asd", "doa": "alive", "diagnosis": "shanghai", "mgmt": "unmethylated", "validated": true, "survival": 1, "karnofsky": 10, "ki67": 1 } }

Upvotes: 0

Views: 1830

Answers (1)

florian
florian

Reputation: 696

I solved it by adding

this.$forceUpdate()

to my save function but this seems to be a pretty ugly hack.

Upvotes: 1

Related Questions