刷新 Json VueJsonCSV 组件中的数据 - VueJS

Question

我正在使用 VueJsonCSV 组件将此数据导出到 csv。这些值是从 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>

从 Vuex 存储更新这些值时，这些数据不会在 json_data 中更改并导出旧数据。它们应该在此 json_data 中自动更新和刷新以导出到 csv，但导出时导出的是旧数据，而不是 Vuex 存储中的更新数据。我应该在脚本中使用什么功能？ 有懂VueJS的请帮忙！

Answer 1

这种代码应该是完全反应式的

<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() 并不是真的要反应，而 computed() 是。

刷新 Json VueJsonCSV 组件中的数据 - VueJS

Refresh Json Data in VueJsonCSV component - VueJS

javascript

json

vue.js

vue-component

nuxt.js