The additional pieces of information transmitted in the state are not being accurately interpreted

I have constants set up that I want to store in the state:

 const day = "25/02/2020";
 const timeStart = "08:00";
 const timeEnd = "00:00";

In my Vuex file, I have the following setup:

  export default new Vuex.Store ({
    state: {
       dateSelected: [], // selected date
    },
    mutations: {
      saveDateSelected (state, [newDateSelected, newTimeStart, newTimeEnd]) {
         const newobject = {
            DateStart: newDateSelected + "-" + newTimeStart,
            DateEnd: newDateSelected + "-" + newTimeEnd,
         };

         state.dateSelected.push(newobject);
      }
    },

When I try to access the data in my component with:

    this.saveDateSelected(day, timeStart, timeEnd);

If I console.log(this.dateSelected);, the output is:

   DateEnd: "2 - /"
   DateStart: "2 - 5"

But what I'm expecting is:

  DateEnd: "25/02/2020 - 00:00"
  DateStart: "25/02/2020 - 08:00"

Answer №1

A best practice is to avoid calling store mutation methods directly from a component. Instead, use commits like this:

this.$store.commit('saveDateSelected', [day, timeStart, timeEnd])

Additionally, ensure you are accessing the Vuex store correctly in a component by using the computed property of the component.

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

Troubleshooting CSS Animation Failure in Internet Explorer 11

My mouse over / mouse out animation works perfectly in Firefox and Chrome, but it's not functioning in IE. Can anyone suggest why this might be happening when it was working fine before? var actual = 1; var over = 0; var over2 = 0; function scrol ...

Ways to call a method in a subclass component from a functional parent component?

In my redux-store, I have objects with initial values that are updated in different places within the child component. As the parent, I created a stateless functional component like this: const Parent = () => { const store = useSelector(state => s ...

Angular: Leveraging real-time data updates to populate an Angular Material Table by subscribing to a dynamic data variable in a service

Seeking guidance on how to set up a subscription to a dynamic variable (searchData - representing search results) for use as a data source in an Angular Material Table. I have a table-datasource.ts file where I want to subscribe to the search results from ...

Tips for setting a value in $scope within an ng-repeat loop in AngularJS

I'm currently facing an issue with ng-repeat in angularJS, specifically on how to assign a value in $scope inside ng-repeat. Here is my scenario: I have a JSON file that contains all the data structured like this: [ {BookID:1,Chapter:1,ContentID:1, ...

Exploring the features of mobile search criteria filtration in jQuery

I have a homepage with various criteria that users can select such as budget maximum and minimum. When they click on the "search" button, I want it to lead them to a list of links on another page that corresponds to their search using jQuery Mobile and ...

Relocating scripts that have already been loaded

When using AJAX to load a page, the entire content including <html>, <head>, <body> is loaded. This means that all scripts meant to run on page load will be called. However, sometimes the browser may remember that certain scripts have alr ...

Experimenting with TypeScript Single File Component to test vue3's computed properties

Currently, I am in the process of creating a test using vitest to validate a computed property within a vue3 component that is implemented with script setup. Let's consider a straightforward component: // simple.vue <script lang="ts" set ...

Utilize Jade to showcase information within an input field

I'm still learning Jade and am trying to showcase some data as the value in a text input. For example: input(type="text", name="date", value="THISRIGHTHURR") However, I specifically want the value to be set to viewpost.date. I have attempted various ...

Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...

In PhantomJS, where is the location of the "exports" definition?

Consider the following code snippet from fs.js: exports.write = function (path, content, modeOrOpts) { var opts = modeOrOptsToOpts(modeOrOpts); // ensure we open for writing if ( typeof opts.mode !== 'string' ) { opts.mode = ...

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

Guide to sending AJAX requests to SQL databases and updating the content on the webpage

One way I have code to showcase a user's name is by using the following snippet: <div><?php echo 'My name is ' . '<span id="output">' . $_SESSION['firstname'] . '</span>' ?></div> ...

Updating Vue component property when Vuex store state changes: A step-by-step guide

As I work on developing a straightforward presentation tool using Vue js and Vuex to manage the app state, I am facing a challenge in implementing a feature that tracks changes in the presentation such as title modifications or slide additions/removals. Cu ...

The Gulp task is stuck in an endless cycle

I've set up a gulp task to copy all HTML files from a source folder to a destination folder. HTML Gulp Task var gulp = require('gulp'); module.exports = function() { return gulp.src('./client2/angularts/**/*.html') .pipe( ...

What makes using the `@input` decorator more advantageous compared to the usage of `inputs:[]`

In defining an input on a component, there are two available methods: @Component({ inputs: ['displayEntriesCount'], ... }) export class MyTable implements OnInit { displayEntriesCount: number; Alternatively, it can be done like this ...

Issues with AJAX requests failing to fire with the latest version of jQuery

A small script I have checks the availability of a username in the database, displaying "taken" if it's already taken and "available" if it's not. The code below works perfectly with jQuery v1.7.2. However, I need to update it for jQuery v3.2.1. ...

Dynamic count down using JavaScript or jQuery

I am looking for a way to create a countdown timer that I can adjust the time interval for in my database. Basically, I have a timestamp in my database table that might change, and I want to check it every 30 seconds and update my countdown accordingly. H ...

The power of relative URLs in AJAX calls

Why does Javascript handle relative URLs differently than standard HTML? Consider the URL provided: http://en.wikipedia.org/wiki/Rome. Launch a Firebug console (or any other Javascript console) and type in the following: var x = new XMLHttpRequest(); x.op ...

Debugging and ensuring the functionality of Cordova (Phonegap) HTTPS connections

There is an HTTPS site with an API that needs to be accessed. I need to work from Cordova (AngularJS) with its HTTPS API. Additionally, I want to debug the AngularJS app in a web browser (Chrome) because it's much quicker compared to rebuilding and ...

"Pairing Angular's loader with RxJS combineLatest for seamless data

Hey there! Currently, I'm working on enhancing my Angular application by implementing a global loader feature. This loader should be displayed whenever data is being fetched from my API. To achieve this, I am utilizing ngrx actions such as fetchDataAc ...