Vue 3: Leveraging Functions Within Mutations.js in Vuex Store to Enhance Functionality

In my mutations.js file, I have encountered a situation where one function is calling another function within the same file. Here's an example of my code:

export default {
  async addQuestionAnswer(state, payload) {
    alert(payload);
    this.updateSubjects(state);
    alert("This is never reached");
  },
  updateSubjects(state) {
    alert("This is never reached");
  },
}

I am seeking assistance on how to properly call the updateSubjects function from the addQuestionAnswer function. Upon checking my console log, I came across this error message:

Uncaught (in promise) TypeError: _this.updateSubjects is not a function

Answer №1

Big shoutout to @kissu for pointing me in the right direction! After sharing the console.log error, your suggestion led me to the solution I needed. Much appreciated. Here's the snippet I added to my mutations.js file:

import store from '../store';

Next, I made a simple tweak from this:

this.updateSubjects(state);

To this:

store.commit("updateSubjects");

And voila, it's working like a charm! 😊

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

Using JQuery to fill an HTML dropdown menu with data from a JSON file

I've been struggling with this issue for a while and despite reading through other posts, I still can't seem to get it to work. My problem lies in populating a drop down menu with JSON data. Although the drop down menu appears on my HTML page, i ...

My JavaScript array is not working with the stringify function

I am trying to encode my JavaScript array into JSON using stringify. Here is the code: params["margin_left"] = "fd"; params["text"] = "df"; params["margin_to_delete"] = "df"; console.info(params); When I check the output in Chrome console, it shows: [m ...

Utilizing one JavaScript file and consistent classes for multiple modals

Is it possible to have multiple modals using the same JS file, classes, and IDs? I created this code: <button id='myBtn'>Order/Discount</button> <div id='myModal' class='modal'> <div clas ...

Generate a dynamic animation by combining two images using jQuery

My attempt to animate two images is not working. I received some help on Stack Overflow but still facing issues with my CSS and HTML code. This is the code I am using: $(document).ready(function() { $(".animar").click(function() { $("#img4" ...

Consolidating multiple inputs into a single saved value

How can I combine three input values into one input field using onchange event in JavaScript? <script type="text/javascript"> function updateInput($i){ $('updateval').val($i); } </script> <input type="text" onchange="updat ...

Discover the geolocation data for post code 0821 exclusively in Australia using Google Maps Geocoding

I'm having trouble geocoding the Australian postcode 0821. It doesn't seem to reliably identify this postcode as being located within the Northern Territory, unlike 0820 and 0822 which work fine. Here's an example of what I'm doing: ...

Issues encountered when using .delay() in conjunction with slideUp()

Issue: The box is not delaying before sliding back up on mouse out. Description: Currently, when hovering over a div with the class ".boxset" called "#box", another div "#slidebox" appears. Upon moving the mouse away from these two divs, #slidebox slides ...

What is the best way to implement a day timer feature using JavaScript?

I am looking for a timer that can automatically change the rows in an HTML table every day. For example, if it is Day 11, 12, or 25 and the month is February at 8 AM, the rows should display "Hello!". function time() { var xdate = new Date(); var ...

Similar to Laravel's service providers or WordPress style plugins, Node.js has its own unique way of managing and extending functionality

Coming from a PHP/Laravel background, my team is considering using Node.js (and sails) for our upcoming project - a collaboration studio for scholars. However, before making the transition, I am curious about the best practices for creating Laravel-style s ...

Tips for boosting the URL count when loading additional data in Vue

Implementing a show more data button that retrieves data from an API on the backend. The API url contains a number which determines when the data should be updated. .post(`/account/api/auth/user/${userName}/posts/more/${visible}/`) I have created a funct ...

Is it possible to trim a video using HTML code?

I am trying to find a way to crop a video using HTML 5. <video id="glass" width="640" height="360" autoplay> <source src="invisible-glass-fill.mp4" type="video/mp4"> </video> Currently, the video has a resolution of 640x360. However ...

What could be causing the continuous occurrence of the error message stating "Module 'socket.io' cannot be found"?

For the past few days, I've been attempting to incorporate socket.io into my NodeJS script. However, every time I run it, I encounter the frustrating error message stating "Cannot find module 'socket.io'". The detailed error is as follows: ...

What are some ways to adjust red and green blocks using CSS?

One question that arises is how to create a version of a webpage where only the yellow block can slide up, while the red and green blocks remain fixed. Currently, the green block is treated with the following CSS: position:sticky; right:0px; top:100px; ...

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

struggling with beginner-level JavaScript issues

Hey there, I've been running into a bit of an issue with my basic javascript skills: function tank(){ this.width = 50; this.length = 70; } function Person(job) { this.job = job; this.married = true; } var tank1 = tank(); console.log( ...

Difficulty adding extra arguments to a function

I am currently working on a function in d3 that aims to evaluate the "time" of my data and determine if it falls within specific time intervals. This will then allow me to filter the data accordingly. //begin with a function that checks if the time for eac ...

No response text returned from the local Ajax request

Currently, I am facing a challenge while attempting to send an ajax call from the client to my server containing data related to an input parameter. The issue is that although I can view the data in my server's console, it does not display in the brow ...

ReferenceError: 'exports' is undefined in the context of Typescript Jest

I'm currently delving into unit testing with jest and encountered an error that looks like this: > npm run unit > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771f181012374659475947">[email protected]</ ...

Using Node JS as both an HTTP server and a TCP socket client simultaneously

Currently, I am developing a Node.js application to act as an HTTP server communicating with a TCP socket server. The code snippet for this setup is displayed below: var http = require('http'); var net = require('net'); var url = requi ...

Is there a way to access and read the console log of a specific website using Python code? I am looking to extract messages such as "ok" and "connected

Seeking guidance on how to interpret console log output for a specific website while automating with Python. Struggling to extract live console data through Selenium, as there's no built-in function for reading logs in real-time. Although I can acces ...