Greetings, I am currently working on developing a table to monitor the validation status of multiple items.
Below is the VueX store configuration:
mutations: {
...,
set_scaninfos: function (state, scaninfos) {
Vue.set(state, 'scaninfos', scaninfos)
}
},
actions: {
...,
setScanInfo (store, scinfo) {
store.commit('set_scaninfos', scinfo)
}
},
Firstly, within the component, I initialize the scaninfos in the Vuex store as follows:
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)
}
Upon receiving updates, I update the data by pushing them using this method:
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
}
})
},
The presentation of the data is handled as shown below:
computed: {
scanId () {
var pId = this.$store.state.scanids[this.scanindex]
return pId
},
scinfo () {
var scinfo = this.$store.state.scaninfos
return scinfo
}
The HTML representation looks like this:
<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>
The raw data structure is a bit complex, here's an example 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 } }