I'm using the VueJsonCSV component to export this data to csv. The values for these are retrieved from Vuex Store.
<template>
<v-btn depressed> <download-csv :data="json_data"> Export Files </download-csv> </v-btn>
</template>
<script>
export default {
data() {
return {
json_data: [
{
No: '1',
Parameters: 'Scenario Name',
Values: `${this.$store.state.scenario.scenario}`,
},
{
No: '2',
Parameters: 'Terrain Name',
Values: `${this.$store.state.scenario.environment.ground}`,
},
{
No: '3',
Parameters: 'Frequency',
Values: `${this.$store.state.scenario.environment['antennas-db'].frequency}`,
},
{
No: '4',
Parameters: 'Environment_type',
Values: `${this.$store.state.scenario.environment.network['ground-profile']}`,
},
{
No: '5',
Parameters: 'Downlink_scheduler_type',
Values: `${this.$store.state.scenario.environment['antennas-db'].scheduler}`,
},
],
}
},
}
</script>
On updating these values from Vuex store, these data aren't changing in json_data and exporting the old data. They should be automatically updated and refreshed in this json_data to export to csv but while exporting it is exporting the old data not the updated data from Vuex store. What function should I use in script? Anyone who knows VueJS please help!
This kind of code should be totally reactive
<template>
<button>
<pre>{{ jsonData }}</pre>
</button>
</template>
<script>
export default {
computed: {
jsonData() {
return [
{
No: '1',
Parameters: 'Scenario Name',
Values: `${this.$store.state.scenario.scenario}`,
},
{
No: '2',
Parameters: 'Terrain Name',
Values: `${this.$store.state.scenario.environment.ground}`,
},
{
No: '3',
Parameters: 'Frequency',
Values: `${this.$store.state.scenario.environment['antennas-db'].frequency}`,
},
{
No: '4',
Parameters: 'Environment_type',
Values: `${this.$store.state.scenario.environment.network['ground-profile']}`,
},
{
No: '5',
Parameters: 'Downlink_scheduler_type',
Values: `${this.$store.state.scenario.environment['antennas-db'].scheduler}`,
},
]
},
},
}
</script>
data() is not really meant to be reactive, while computed() is.