When dealing with async actions in NUXT, Vuex properties may fail to reflect changes in the DOM

Just recently, I put together a small test page and store to showcase something. Based on the code, it was expected to display count = 1 initially, and then after 500ms, it should update to count = 2 as the store gets updated.

Have a look at my test.vue:

<template>
  <div>count = {{ count }}</div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  layout: "test",
  computed: {
    ...mapGetters({ count: "test/count" }),
  },
  mounted() {
    this.$store.dispatch("test/updateCount");
  },
};
</script>

And here's the content of store/test.js:

export const state = () => ({
  count: 1
});

export const getters = {
  count(state) {
    return state.count;
  }
};

export const actions = {
  updateCount(context) {
    setTimeout(() => {
    context.commit("setCount", 2);
    }, 500);
  }
};

export const mutations = {
  setCount(state, value) {
    state.count = value;
  }
};

Despite all this, I always see count = 1 in the DOM

In vue devtools, both vuex bindings and vuex state reflect count = 2, but for some reason, it doesn't get updated in the DOM.

Interestingly, removing the setTimeout function in actions seems to make it work properly.

Can anyone spot what might be going wrong?

Answer №1

During my work on a Japanese website, I had initially enabled Google translations for assistance but soon realized it might be causing interference. After turning it off, the website is now functioning properly!

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

Is it possible to use JavaScript to scrape content from another website and incorporate it into my HTML document?

Attempting to web scrape another website in order to display its content on my own site. I have written JavaScript code that works, but only when triggered on the website's onClick event. var button = document.getElementById("scrape-website"); button ...

Incorporating an unique identification code within the input field

I have a HTML code that displays geolocation information: <span id="currentLat"></span>, <span id="currentLon"></span> When combined with JavaScript, it works perfectly. However, I am trying to display the above value in a text fi ...

Three.js: Objects in the distance appear more subtle

Currently, I am developing a three.js scenario that showcases textured point sprites. These sprites obtain their textures from a single uniform, which is a 2D canvas containing the alphabet: https://i.stack.imgur.com/Ceh9x.png In my scene, all the letter ...

Angular JS - the culprit behind app crashes in Safari and IE

I'm encountering an issue with my Angular JS app. There is some code that counts the characters from an array, but for some reason it is causing the app to break and stop working in Safari and IE. I've tried to figure out what's wrong, but c ...

Utilizing Bootstrap Plugins with Nuxt.js: A Step-by-Step Guide

"dependencies": { "ant-design-vue": "^1.7.2", "bootstrap": "^4.6.0", "core-js": "^3.8.3", "nuxt": "^2.14.12", "popper.js": "^1.16.1" } ...

Tips for concealing tick labels in d3 using TypeScript

When trying to hide tick labels by passing an empty string to the .tickFormat("") method, I encountered an issue with Typescript. The error message received was as follows: TS2769: No overload matches this call. Overload 1 of 3, '(format: null): Axi ...

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

Is there a way to find keys with matching values within a dictionary?

In my dictionary, I have two sets of identical array values for different keys. My query is: How can I determine which keys have the same value based on inputting just one value? I want to retrieve all keys that share the same values as an output. This i ...

Can one sever the connection using the bittorrent protocol?

At this time, A and B are in the process of transferring files directly. My goal is to execute code that severs the connection between the torrent and B. I attempted to disconnect the ongoing connection with codes provided here which included the followi ...

Issues with Height Directives not Being Followed by Bootstrap 4

I am facing an issue with my web layout where I have two elements that are supposed to occupy 25% and 75% of the screen height using Bootstrap 4's row directives. However, it seems like these directives are not affecting the height of the elements as ...

Closing tag in jQuery

In my script, I am using a div tag within the jquery code. However, whenever the div tag appears in the jquery code, it automatically closes the script tag and breaks the jquery code. For example, consider the following code: <script>var b = 25;var ...

What is the best way to obtain the true dimensions of an HTML element?

Is there a way to determine the dimensions of a <div> element in order to accurately position it at the center of the browser window? Additionally, which browsers are compatible with this method? ...

Import a JSON file into Parse by reading and parsing it to store in the database

I am currently facing a challenge with parsing JSON data in my Parse Cloud function. After fetching the JSON file, I need to parse the data and populate one of my classes with the results. However, I'm having trouble figuring out how to properly parse ...

What is the process for automatically disabling a checkbox based on the condition that the value in another field is 0?

Before we proceed, feel free to check out the jsFiddle example provided: https://jsfiddle.net/1wL1t21s/ In my scenario, there are multiple checkboxes for selecting toppings with a quantity adjustment feature using the plus (+) and minus (-) buttons. Curre ...

What is the distinction between selecting and entering a date input value?

When a user selects a date, it needs to be immediately sent to the server. If they manually type in the date, it should be sent on blur. The issue arises when the oninput event is triggered for each keydown event, causing unnecessary server requests while ...

Combining two arrays containing objects in JavaScript

Imagine having 2 arrays of objects that you want to merge in a parallel manner. For instance var array = [{foo: 2} , {boo: 3}] var array2 = [{foo2: 2}, {boo2: 4}] The outcome would be var array3 = [{foo:2,foo2:2},{boo:3,boo2:4}] In what way can this be ...

utilizing a modal to trigger a function within the parent scope of an Angular application

I have a main.controller.js where there is a modal in place to notify the user of a warning before proceeding to the rest of the application. For example, I want to trigger my fileNew function from the modal. In main.controller.js: $scope.warningMod ...

Incorporating promises with ajax to enhance functionality in change events

Consider the scenario where you trigger an ajax request upon a change event in the following manner: MyClass.prototype.bindChangeEvent = function(){ $(document).on('change', '#elementid', function(){ var $element = $(this); $ ...

Identification for checkbox within an HTML container

I am looking to create a feature where clicking on the label text will toggle the checkbox on the box.html page. Within index.html, I have added an iframe that displays box.html. Index.html <html> <body> <iframe src="box.html" ...

Safari: Fixed-positioned DIVs staying put after DOM updates

Hey there! I've been experimenting with animating absolutely positioned DIVs on my webpage using some JavaScript to update the top and left CSS properties. It's been working smoothly in Chrome, Firefox, and even Internet Explorer 8. However, I e ...