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

What are some effective ways of using the parent, before, and children selectors?

<table> <tr><td><input type="text" value="123"></td><td><input class="here" type="text"></td></tr> <tr><td><input type="text" value="333"></td><td><input class=" ...

The process of filtering a model stops at the third character and results in an empty output

Whenever I input a value into the 'temp_dollars' model and use a watch property to filter it, the input only retains the first 3 characters and resets. For instance: When I type 123, The model value remains as 123. But wh ...

The TypeScript error message states that a value of 'undefined' cannot be assigned to a type that expects either a boolean, Connection

I've been grappling with this code snippet for a while now. It was originally written in JavaScript a few months back, but recently I decided to delve into TypeScript. However, I'm struggling to understand how data types are properly defined in T ...

Encountering a getMacChromiumEdgeDriverArchitecture error while using wdio/selenium-standalone-service

As I continue to learn WebDriverIO and adjust to MacOS, I encountered an error while trying to execute a spec file using "npm run test:wdio". The error message is as follows: > [email protected] test:wdio /Users/vinicius.correia/Desktop/dev/automat ...

How can you effectively manage Click events within a three.js environment?

I'm working with a world map layer as a plane geometry and I need to handle click events on different parts, such as continents or countries. I want to show popup events on specific parts like information, videos, or image data with links. How can I a ...

Node.js CallbackHandler: Simplifying event handling in JavaScript applications

I implemented the following function in a .js file to handle an asynchronous network connection: function requestWatsonDiscovery(queryString) { console.log('Query =', queryString); if (typeof queryString !== 'undefined') { ...

What could be the reason for the unexpected undefined value of my ajaxurl variable?

Seeking assistance with implementing code to track mp3 plays in a Wordpress plugin using ajax-counter.js jQuery(document).ready(function($) { console.log(ChurchAdminAjax.ajaxurl); $("audio").bind("play", function(){ console.log(ChurchAdmin ...

issue with leaflet vue3 component showing incorrect marker popup when clicked

I am dynamically loading markers based on the bounding box from an API using a Pinia store. These markers are stored in the itemsList property of my map wrapper component map-view. The markers are rendered as circlemarkers inside a Vue-for loop. As I navi ...

Showing specific error messages in an Inertia Vue - Laravel application

My table is dynamic, allowing users to add multiple services with the option to select quantities and apply discounts. <tr v-if="proceduresList.length" v-for="(procedure,index) in proceduresList" :key="procedure.id"> ...

Display the dist file (from Vue.js) within Django

After successfully rendering the Vue.js build (index.html) in Django, a problem arises when attempting to add any routes to the URL. In such cases, it results in a "page not found" error from Vue. Rendering without routes works perfectly fine: url(r' ...

Is JavaScript generating a random sequence by dynamically adding fields?

I'm encountering an issue with my button that adds a set of text fields every time I click on the Add More button. The problem is that when I add new text fields, they are appended above the Add More button. Then, pressing the button again adds more t ...

Discover the power of integrating JSON and HTTP Request in the Play Framework

My aim is to develop a methodology that can effectively manage JSON and HTTP requests. This approach will facilitate the transition to creating both a Webapp and a Mobile App in the future, as JSON handling is crucial for processing requests across differe ...

What is the most effective method for implementing a debounce effect on a field in React or React Native?

Currently, I am working on implementing a debounce effect in my useEffect. The issue is that the function inside it gets called as soon as there is a change in the input value. useEffect(() => { if (inputValue.length > 0) { fn(); ...

Automatically submitting a form in React.js based on certain conditions being met

Does anyone have experience with React login and register form buttons that trigger Redux actions? I'm facing an issue where both actions are being dispatched at the same time when certain conditions are met. Here is my code snippet: const LoginPage ...

When text exceeds multiple lines, display an ellipsis to indicate overflow and wrap only at word boundaries

Here is an example snippet of my code: <div class="container"> <div class="item n1">Proe Schugaienz</div> <div class="item n2">Proe Schugaienz</div> </div> and I am using the following jQuery code: $(&apos ...

What is the best way to access an external array using ng-repeat in AngularJS?

My dataset consists of 3 separate arrays. "areas": { "default": [ { "area": "Master Bedroom", "uuid": "986e3f42-1797-49ae-b060-181a33b9", "description": "", "new": [ { "value": "986e3f42-1797-49ae-b060-181a3 ...

Place a user input field within a div element having the specified class

I am trying to insert an HTML input element into the following div: <div class="sss" style="padding-top:2px"> <center> <input value="test1" name="name1" type="submit" > <input value="test2" name="name2" type="submit"> </c ...

What could be the reason behind my Vue file triggering a TS6504 error and suggesting to "allowJs"?

My Vue 3 project, which incorporates TypeScript, is encountering an issue when I attempt to execute vue-tsc --noEmit. error TS6504: File '/proj/src/pages/Index.vue.__VLS_template.jsx' is a JavaScript file. Did you mean to enable the 'allowJs ...

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

Connect to the MongoDB database running on localhost using the mongoose library

I am currently learning about the MEAN stack through this helpful tutorial. However, the tutorial assumes a connection to a remote mongodb installation. I have MongoDB already set up and running on my CentOS7 localhost. To modify the mongoose connect line ...