The information in Vuex Store and Vue Component is not aligning and syncing properly

I am encountering an issue with a specific component in my Quasar project. I am currently utilizing a Q-table to display data pulled from a data field, which is supposed to sync automatically with the Vuex store. However, I am noticing that the data does not update while staying on the component; it only updates when I navigate away and back to the component. Any assistance on resolving this issue would be greatly appreciated. Here is the Vuex Store code snippet:

import { Module, VuexModule, getModule, Mutation, Action } from 'vuex-module-decorators'
import { websocket } from 'src/boot/socket.io-client'
import store from 'src/store'
import { AcademicProgramData, AcademicProgramPagination, AcademicProgramQualification, AcademicProgramStatus } from './types'
...

<p>Below is the code snippet for my Component:</p>

<pre><code><template>
  <div>
    <q-toolbar
      class="bg-grey-1 text-subtitle1 text-blue-grey-8 shadow-2 rounded-borders"
    >
      ...

</script>

Answer №1

It seems like there is an issue where you are assigning data with reference1 in your component, and expecting it to update when any other variable changes in your vuex store. Instead, utilize the store reference to access your data array

AcademicProgramModule.data = [1,2,3]
...
private data: AcademicProgramData [] = AcademicProgramModule.data

...
AcademicProgramModule.data = [4,5,6]
...
console.log(data) // [1,2,3]

//better

get data(){
  return AcademicProgramModule.data
}

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

Firebase Cloud Function Local Emulator Fails to Retrieve Data with Error 404

My goal is to locally trigger a Firebase Cloud Function using the emulator. However, every time I try, the function returns a 404 Not Found status code and a response body of Cannot Get. The function is deployed locally and visible on the UI, but it fails ...

Utilizing object/array in context with Gridsome Pages API

I am a beginner when it comes to Gridsome and GraphQL, but I have an interesting project in mind. I have a relationship where Employees are connected to Projects in a many-to-many manner, and I want to create a dedicated page for each employee that lists a ...

Is it possible for a property to be null or undefined on class instances?

Consider this TypeScript interface: export interface Person { phone?: number; name?: string; } Does having the question mark next to properties in the interface mean that the name property in instances of classes implementing the interface ca ...

Verifying the presence of an object in an array based on its value using TypeScript

Having the following dataset: roles = [ {roleId: "69801", role: "ADMIN"} {roleId: "69806", role: "SUPER_ADMIN"} {roleId: "69805", role: "RB"} {roleId: "69804", role: "PILOTE"} {roleId: "69808", role: "VENDEUR"} {roleId: "69807", role: "SUPER_RB"} ] The o ...

Obtain the combination of values within an array object

I am attempting to write the specifications for a function that can take records of any structure and convert the values into a discriminated union. For example: const getKeys = <T extends {key: string}>(items: T[]): T['key'] => { // ...

Steps for importing jQuery to vendor.ts in Angular 2 webpack

Currently, I am in the process of setting up my Angular 2 app using webpack. As I review the vendor.ts file, I notice this specific structure. // Angular 2 import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; ...

The DOM fails to reflect changes in the data variable in VueJS

I am facing an issue while trying to update an array of arrays and display it as a reactive variable, however the DOM does not seem to reflect those changes. To achieve this, I have two components - a parent component and a child component: Parent Compon ...

Tips on preventing image previews from consuming too much text data while updating a database in Angular 12 using Material UI for image uploads within a FormGroup object

Currently working with Angular 12 and Angular Material for image uploads with preview. I have a formgroup object below, but I'm running into issues with the 197kb image preview text being inserted into the database. Despite trying setValue/patchValue/ ...

The key is not applicable for indexing the type as expected

Here is the TS code I am working with: type Fruit = { kind: "apple" } | { kind: "grape"; color: "green" | "black" }; type FruitTaste<TFruit extends Fruit> = TFruit["kind"] extends "apple" ? "good" : TFruit["color"] extends "green" ? "good" : ...

What is the method for applying multiple criteria to filter an array in Vuejs?

const app = new Vue({ el: '#app', data: { search: '', itemsList: [], isLoaded: false, selectNum: status, userList: [{ id: 1, name: "Prem", status: "ok" }, { id: 2, ...

Bring in a library with Angular2 using webpack

I am currently utilizing the angular2-webpack starter from GitHub, and I am looking to incorporate an npm library, such as Babylon JS. My approach so far has been as follows: import * as BABYLON from 'babylonjs/babylon'; The Babylon library inc ...

Issues with Vue.js v-for functionality causing inconsistencies

Just delving into the world of Vue.js and encountering a hitch. I've been following a tutorial on Laracasts, but my v-for directive seems to be causing some trouble. Here's the HTML: <div id="root"> <ul> <li v-for="name in ...

Sign up for a feature that provides an observable exclusively within an if statement

There is an if clause in my code that checks for the presence of the cordova object in the window global object. If cordova is present, it will make a http request and return the default angular 2 http observable. If the application is in a web context wh ...

An issue occurred during the component import process in Vue.js

Perhaps it's just a small error. As someone new to this field, I'm encountering a Syntax Error with Unexpected Token in this section: component: () => import('@/layouts/default.vue'), Any idea what might be causing this issue? ...

Tips for resolving CORS issue when making calls to a third-party API in Nuxt 3

Currently, I am experimenting with Nuxt 3 and utilizing the useFetch hook to request data from an API. However, every time I attempt to call the 3rd party API endpoint https://apitest.bankfeeds.com.au/v1/customer/data using the useFetch hook, it results in ...

During rendering, the instance attempts to reference the "handleSelect" property or method which is not defined

I've incorporated the Element-UI NavMenu component into my web application to create a navigation bar using Vue.JS with TypeScript. In order to achieve this, I have created a Vue component within a directory called "navBar," which contains the follow ...

Retrieving axios response and saving it to localStorage with interceptor

UPDATE: The issue here is that a interceptor is storing authentication headers in local storage, causing the response not to be logged. It is important for the response to go through so that user information can be saved. You'll find the interceptor c ...

How can I encode and decode a base64 string using AngularJS1 and TypeScript?

I am currently working with Angular1 using TypeScript and I have a question that needs some clarification. Within the environment that I am operating in, is there a method available to encode and decode a string in base64? Despite conducting extensive re ...

Display the map using the fancybox feature

I have added fancybox to my view. When I try to open it, I want to display a map on it. Below is the div for fancybox: <div id="markers_map" style="display:none"> <div id="map_screen"> <div class="clear"></div> </div&g ...

A guide to sorting through in-app notifications in REACT-NATIVE based on their read status

Incorporating two headings, "Unread" and "Read", into the notification system is my goal. When opened, the Unread Notifications should be displayed beneath the Read notifications. This data is being retrieved from an API. Each notification contains a key ...