Issue with Vuex: "watch" function does not trigger when "null" is passed in a store action

I've encountered an issue when trying to update certain template properties in response to a change in a Vuex store value.

If I set the value to undefined within my store action (e.g.

commit('SET_SELECTED_TICKET_ATTACHMENTS', undefined);
), everything works as expected.

However, if I set the value to null instead (

commit('SET_SELECTED_TICKET_ATTACHMENTS', null);
), my watch function does not trigger.

The watch function being used is:

selectedTicketAttachments () {
  this.isTicketAttachmentLoading = false;
}

Here is the mutation associated with this watch function:

SET_SELECTED_TICKET_ATTACHMENTS(state, selectedTicketAttachments){
  state.selectedTicketAttachments = selectedTicketAttachments;
},

I would greatly appreciate any assistance on this matter!

Answer №1

EstusFlask pointed out that the commit will only occur if there is a change in state. The issue I faced was that, in specific scenarios, null would be committed before my watch handler could detect it.

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

Loop through the list items using jQuery and retrieve the value of the data-imgid attribute

Multiple li elements have a unique data-id attribute, as shown below: <ul> <li data-imgid="5" class="getMe">some text</li> <li data-imgid="6" class="getMe">some text</li> <li data-imgid="7" class="getMe">some t ...

What are some ways to blend arrays and objects in Javascript?

Input Array: [{name: xyz}, {name: abc}, {name: def}], [ {name: ghi}, {name: jkl} ] Desired Output: New Array: [{name: xyz}, {name: abc}, {name: def}, {name: ghi}, {name: jkl}] ...

Tips for showing ng-repeat items solely when filters are applied by the user

Is there a way to only display elements when a user uses a filter? For instance: $scope.elements = [{name : 'Pablo', age : 23}, {name : 'Franco', age : 98}]; <input type="text" ng-model="searchText" /> <div ng-repeat="elemen ...

How can I detect the @mouseup event in a Vue Bootstrap slider?

I have been using a vue-bootstrap slider that comes with two actions, @change and @update. My goal is to capture the final position of the slider once the movement ends. To achieve this, I decided to test both actions. In my scenario, @change triggers ev ...

Node.js and Socket.IO struggle with message delivery

My goal was to develop a chat-like application, so I decided to work with nodejs and socket.io. To simplify things and get a better understanding of how it all functions, I created a button that emits a message to the server. My expectation was that this m ...

Is it achievable to obtain the parameters in $http within Angular framework?

Looking for a solution I currently have this code snippet: let promise = $http.get('/api/users'); Is there a way to extract the parameters from the promise object? Here is what I envision: let promise = $http.get('/api/users'); let ...

How can I properly nest these quotation marks within each other?

I'm attempting to make this code work by using nested quotes, but I'm unsure of how to triple-nest them. Here is the code I currently have, however it is not functioning properly as I receive a Runtime.evaluate threw exception: SyntaxError: Unexp ...

I am looking for a regular expression that will eliminate any leading white space while still permitting spaces between words

Below is the code I've created for an angularjs directive that removes spaces. It successfully eliminates spaces between words, but unfortunately still allows leading spaces. function customValidation() { return { require: 'ngModel&apos ...

Oops, the element type specified is not valid. Make sure to use a string for built-in components when working with NextJs

I am incorporating SVG's as a component in my nextjs application, but I encounter the following error message: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. ...

Angular: do not listen to messages sent by yourself

One of my directives is responsible for expanding and collapsing the height of a div. Since this directive is used multiple times on the page, I want to ensure that when a user opens one box, it closes any other open boxes. My initial thought was to emit a ...

Python-based Full Stack Configuration

In the past, my go-to front end framework was Angular 1.x, which only required including a single JS file. However, with the adoption of TypeScript in frameworks like Angular and React, there's now a need for a dedicated NPM build server to compile th ...

"Encountering a freeze in mobile Chrome while subscribing to streamCreated events using Opent

Currently, I am working on developing a webRTC chat using the opentok platform and vue.js. Everything seems to be working fine on desktop and mobile Firefox browsers, but I am facing an issue with mobile Chrome when trying to subscribe to the event strea ...

How can I use AJAX to upload an image by clicking on it and instantly updating the source?

I'm currently diving into the world of ASP.net/Razor for a project. One key aspect of this project is dealing with profile images. My ultimate goal is to upload an image from my computer to the server and then replace the old picture with the new one ...

The push method is not pushing the elements

Why aren't the values being pushed into the array in the code snippet below? app.get("/overview", (req,res)=>{ const email = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="600a01030b4e10120f4e0f06060 ...

"Setting an index to a button's ID using Jquery: A step-by-step guide

My goal is to assign incrementing index values to button IDs in a loop. For example, if the first button has an ID of 'unique', the second button should have an ID of 'unique0', and the third button should have an ID of 'unique1&ap ...

The attempt to access 'reading params' is resulting in an error due to undefined properties

Looking for some assistance in resolving an error I'm encountering. Below is a snippet of my code: const ProductScreen = ({match, history}) => { const [qty, setQty] = useState(1); const dispatch = useDispatch(); const productDetail ...

Leveraging Django template tags in JavaScript

Currently working on a project that does not have a slug field, and this value is created in the template using: {{ n.title|slugify }} I need to incorporate the slug into a jQuery function, but the variable always remains empty: $("select#model").click( ...

What is the reason behind the trigger event failing to invoke events that are specified with addEventListener?

I have created a sample scenario: http://jsfiddle.net/y42pu5b6/ $(function(){ function ping (){ alert( "function fired" ); console.log("fired"); } console.log($("input#one")[0]); $("input#one")[0].addEventListener("chan ...

Encountering a surprising token while iterating through arrays in JavaScript

I am new to Javascript and currently trying my hand at creating a variable called pets with an array ['cat', 'dog', 'rat']. I want to use a for loop to pluralize each word in the array. This is my code: var pets = ['cat ...

The JSON response from Rails containing multiple lines is not being parsed accurately

I am currently working on a Rails application with a json response using show.js.erb. { "opening": "<%= @frame.opening %>", "closing": "<%= @frame.closing %>"} An issue I encountered is that when @frame.opening contains multiple lines, jQuer ...