Refresh Json Data in VueJsonCSV component - VueJS

Question

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!

Use a Vuex getter to generate the data and then simply grab the output. — IVO GELOV
– IVO GELOV, Commented Apr 21, 2022 at 9:15
data() is static, it will not be reactive if the values are updated. Try it in a computed(). — kissu
– kissu, Commented Apr 21, 2022 at 9:37

kissu · Accepted Answer · 2022-04-21 10:20:02Z

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.

Collectives™ on Stack Overflow

Refresh Json Data in VueJsonCSV component - VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related