When Vue.js Vuex state changes, the template with v-if does not automatically refresh

I have tried setting the v-if value in computed, data, passing it as props, and directly referencing state, but it never seems to re-render despite the fact that the state I am checking for is changed to true.

Currently, I am directly referencing the store:

<template v-if="this.$store.state.showReviews">

I make an AJAX request in my Vuex action:

getBikeReviews(context, i){
  console.log("getBikeReviews");
  axios.get('http://mpaccione.com/wp-content/themes/webdev/projects/Web_Design_4/Creating_Online_Store/api/get_reviews.php?index='+i).then((res) => {
    context.commit('storeBikeReviews', {"index": i, "json": res.data});
    context.commit('showReviews', true);
  });
}

The state is mutated to true:

showReviews (state, payload){
  console.log("showReviews");
  state.showReviews = payload;
}

Nevertheless, the template never reloads.

Answer №1

Have you attempted implementing getters or computed values?

computed: {
  displayReviews() {
    return this.$store.state.reviews || []
  },
  reviewsAvailable() {
    return this.$store.state.displayReviews === true
  }
}

Moreover, it's highly advised to utilize Vue.$set instead of basic assignment whenever feasible.

Import Vue from 'vue';

showReviews (state, payload){
  Vue.$set(state, 'displayReviews', payload);
}

Although this might not fix the issue with certain value types, in my opinion, it should be implemented consistently to ensure no oversight for those that do require it.

Lastly, if experiencing difficulty initiating reactivity, triggering a re-render can be achieved by invoking this.$forceUpdate(); (or Vue.$forceUpdate();) following your mutation.

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 is the mechanism by which Redux sends state to mapStateToProps?

I'm currently delving into the inner workings of React and Redux, and recently came across FuelSavingsPage.js in this sample project. While I grasp how actions is obtained in mapDispatchToProps, I am uncertain about how state is passed to mapStateToPr ...

"Experience the magic of Datepicker jQuery with just a click

Does anyone know how to capture the click event when a day is selected using jQuery Datepicker? Is it possible, and if so, how can I achieve this? https://i.sstatic.net/ZG4r8.png Here is the HTML code snippet: Date From : <input type="text" ...

Struggling to save the resolved data from a promise in Node.js to a variable

I am currently utilizing nodejs to develop REST APIs and I am facing an issue with storing resolved data from multiple promises into a single variable. Here is a snippet of the code I am working with: var resultset={}; function getAllTeams() { retu ...

Tips for utilizing state and city dropdown menus in JavaScript multiple times without interfering with other dropdowns

Currently, I am utilizing CodeIgniter to create a dynamic dropdown functionality. The setup involves four select country dropdowns where the state options will populate based on the selected country, and once a state is chosen, the corresponding city optio ...

AngularJS document object model selector

My custom directives use jQuery for animation effects because I find angular's built-in ngShow/ngHide to be functional but not visually appealing. I vaguely remember reading in the documentation that Angular has its own DOM selector, something like an ...

Dynamic dropdown menu that includes client-side filtering functionality

Does anyone know of an ajax control that meets the following criteria: Enables users to type in for auto-suggestions Dropdown only displays values starting with the characters typed One postback is needed to fetch all data on initial key-in, then f ...

Is it possible to remove a record using jQuery AJAX from a table that has rows dynamically added using AJAX?

I am encountering an issue where I am unable to access or select the delete buttons in my table rows, which are populated within the table body using ajax on document load. It seems that this problem is arising due to the asynchronous nature of ajax. I a ...

Tips for obtaining validation errors on input elements in React when the input field is of type "file"

Currently, I am utilizing Material UI to cover the input component with icons. However, I have encountered an issue where there is an input element hidden and as a result, validation errors are not being displayed. The library I am using for validation i ...

Customize Bottom Navigation Bar in React Navigation based on User Roles

Is it possible to dynamically hide an item in the react-navigation bottom navigation bar based on a specific condition? For example, if this.state.show == true This is what I've attempted so far: const Main = createBottomTabNavigator( { Home: { ...

What could be causing the issue with Hindi text not displaying properly on Safari?

I'm having trouble with displaying Hindi text on my website. I tried pasting the text in a new file and it worked, so why is it not loading correctly in this case? The Hindi script is within the second span with the class word w2. "use strict"; le ...

Toggle JavaScript Query Display

Welcome to my HTML test website where I am testing show/hide JavaScript functionality. Upon loading the page, you may notice that everything is hidden until a button is clicked. <html> <head><title>Test</title> <scr ...

Can anyone provide guidance on showcasing data received from Laravel resource in a Vue Component?

I've been honing my skills in Vue and am grappling with how to manage data passing. Within my Vue component, I have a link that looks like this: <a class="btn btn-success" :href="'/projectpage/' + project.id">Bid</a>, and I found ...

The dataset remains undefined within the context of Vue.js

I am attempting to utilize the dataset property in Vue to retrieve the data-attribute of an element. Here is how I am implementing it: <ul id="filter"> <li><a class="filter-item" v-on:click="filterItems" data-letter="a" href="#"> ...

Adjust the divs right element by adding or removing 1 pixel for every size change in the browser

I have been exploring different approaches to achieve this task and it seems like using javascript might be the most effective way. I am currently dealing with a stubborn social icon container placement issue. More details on my previous question can be fo ...

A thrilling twist on the classic game of Tic Tac Toe, where X and

I am having trouble with switching between the cross and circle symbols in my Tic Tac Toe game. The code seems to be set up correctly, but it's not functioning as expected. Any suggestions on how to fix this? Here is the JavaScript code: varcode va ...

Updating the appearance of tabs in React Native Navigation dynamically during runtime

I am currently working with the startTabBasedApp API, which includes three tabs in my app. I have a requirement to change the background color of the tabBar for specific screens dynamically. Is it possible to achieve this at runtime? For instance: Scree ...

Run a function upon clicking a button in JavaScript

Could someone please help me figure out what I am doing incorrectly in the code below? I am attempting to trigger a function when a button is clicked. The HTML: <button id="btn1">Press me!</button> <input type="button" id="btn2" value="Pr ...

The challenge of handling Set type in TypeScript errors

I'm currently facing two errors while trying to convert a function to TypeScript. The issue lies with the parameters, which are of type Set import type {Set} from 'typescript' function union<T>(setA: Set<T>, setB: Set<T>) ...

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

As a newcomer to Typescript, my understanding of the code might be lacking. I am currently working with the Klasa framework, which is built on top of Discord bot framework using Discord.js. The framework recently introduced plugin functionality and there a ...

Exploring the process of transforming a dynamic PDF into a static PDF using PHP or NodeJS

Issue I am looking for a PHP/NodeJS API that can convert editable PDF files to non-editable PDFs online. Our client application requires the user to download PDF files that cannot be modified using software like Foxit Reader or Adobe. We are currently us ...