Update Json information within VueJsonCSV and VueJS component

I'm currently using the VueJsonCSV component to export data to a CSV file. The values being exported are retrieved from the 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>

After updating these values in the Vuex store, I noticed that the data in json_data does not automatically update and reflect the changes when exporting to csv. Instead, it still exports the old data. Can anyone familiar with VueJS suggest which function should be used in the script to ensure that the json_data is always updated with the latest data from the Vuex store before exporting? Your assistance is greatly appreciated!

Answer №1

This type of coding needs to be highly responsive

<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 designed to be reactive, unlike computed().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript HTML content manipulation

Why doesn't this code work? innerHTML cannot handle something so complex? <html> <head> <script type="text/javascript"> function addTable() { var html = "<table><tr><td><label for="na ...

The functionality of sending form data via Express.js router is restricted

In my current project, I am developing a basic CRUD functionality in express. My goal is to utilize the express.Router() to transmit form data via the HTTP POST method. The form structure on the browser appears as follows: form.png The process was flawle ...

Tips for successfully transferring the nested service and retrieving the response from an Angular factory to a controller

After making the Http Request and receiving the response from the first Service call, I then pass that response from the first service into the second service and receive the response back to the controller. Now that I have the response, I need to find a ...

Tips for achieving comma-separated user input via ngModel and appending it to an array

I am working on an email template that includes a cc option. I want users to be able to add email addresses with commas separating them and then push them to an array called $scope.notifyCtrl.cc. How can I accomplish this using AngularJS 1.5 and above? mai ...

IE 7 textarea malfunctioning with word spacing issues

I have a website using the LAMP stack with a form that users fill out. Strangely, when I view the submitted form data in IE 7, it adds line breaks between each word. The form is simple with input elements and a text area. Submitting the form in FF3+, IE8, ...

The issue persists with react-hook-form and Material UI RadioGroup as the selected value remains null

Having trouble with RadioGroup from Material UI when using react-hook-form Controller. I keep getting a null selected value, even though my code seems right. Can you help me figure out what's missing? import * as React from "react"; import { ...

How can I use JavaScript fetch to retrieve data from a JSON file based on a specific value?

I am looking to extract specific values from a JSON array based on the ID of elements in HTML. How can I achieve this? [ { "product": "gill", "link": "x.com", "thumbnail": "gill.jpg ...

I need to update my database by sending requests to my API, as the changes are not being reflected in the current database state. I am eager to see the

Struggling to grasp the concept of making requests to an API that uses express for CRUD operations. In the code snippet below, .get(/bears) displays a form and in app.post('/bears'), I'm using the 'request' module to send a request ...

Ordering an array based on two integer properties using JavaScript

Here is an array of objects I am working with: const items = [ { name: "Different Item", amount: 100, matches: 2 }, { name: "Different Item", amount: 100, matches: 2 }, { name: "An Item", amount: 100, matches: 1 }, { name: "Different Item" ...

Navigating through Sails.js: A comprehensive guide on executing test cases

Being a beginner in sails, node, and js, I may be missing out on some obvious steps. My environment includes sails 0.10.5 and node 0.10.33. Although the sails.js documentation covers tests in , it does not provide instructions on how to actually execute ...

"Unleashing the power of webpacker gem to tap into your assets

Can someone help me understand how to access assets from webpacker gem within vue.js components? Specifically, I'm trying to create a div with a background image. I've attempted using both the /app/assets/images and /app/javascripts/assets folder ...

CSS - tackling the issue of menu items overlapping

My menu has two items, and when the user clicks on each item, a sub-menu is displayed. The issue is that both menus are displaying at the same spot - under the first item. I've tried tweaking it for a while but can't seem to fix the problem. Ad ...

Struggling with properly formatting JSON for Azure function input

I need to send the JSON data below to an Azure function for processing an XMLA query. How can I correct the JSON format so that it can be successfully sent to the Azure function? {"WorkspaceId": "workspaceid", "DatasetId": & ...

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

I am seeking to utilize ng-href for loading different Themes. One issue I am encountering is that the unstyled content appears before the stylesheet is applied. I have created a Plunker where I made changes to Line 8 in the last 3 Versions for comparison ...

detect mouse click coordinates within an iframe that spans multiple domains

I am currently encountering an issue with tracking click position over a cross-domain iframe. Here is my current code: <div class="poin"> <iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video">< ...

What are the steps to implement the jQuery slide menu effect on a website?

When visiting the website , you may notice a symbol positioned in the top left corner of the site. By clicking on this symbol, a sleek div will slide out. How can this type of animation be achieved through javascript or jquery? ...

Is there a JSON serializer in C#/.NET for the client profile?

Are there any built-in JSON de/serializers available in .NET client profile? Or do I have to include System.Web.Extensions.dll or use a third-party library like json.net (which is quite reliable)? I really wish that by now (2012 with .NET 4.5) there would ...

Utilizing a CSS identifier with jQuery

I'm struggling with a basic .each statement for comments where I want a form at the bottom to add new comments. The goal is simple - when someone submits a comment, I want it to display just above and move the form down using jQuery. Although this fun ...

The Struts2 JSON response received through the $.getJSON method is showing an unexpected undefined result

Attempting to retrieve a String value from an action class using the $.getJSON method, but receiving an output of undefined. Below are the code snippets that have been tested: Script: $(function() { $("#newPostionFormID").submit( ...

Using ng-repeat to iterate over forms in AngularJS

I have implemented dynamic forms using the ng-repeat directive where form fields are generated based on the userid value. The requirement is that the add user button should be enabled only when all form fields are filled. However, currently the button rema ...