Here is a paragraph about the list of child components: <question-list-item v-for="(item, index) in questionListParsed" :key="item.id" :both-question="item" :class-id="classId" ...
This is how my Vue component looks: <template> <select class="form-control" v-model="selected" required @change="changeLocation"> <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>&bs ...
I've searched everywhere for a solution to this issue. Currently, I am working on a sample vue-vuex-electron app that I have developed. My goal is to dynamically enable or disable certain submenus within the app based on the vuex state 'isLogged' being tr ...
Can you explain the main distinction between watch and subscribe, and when it is most appropriate to use one over the other? According to information on the Vuex official documentation, both methods appear to be essentially identical in functionality and p ...
I have integrated vue google charts into my nuxt project. Whenever I select a different date, the data gets updated and the computed method in my geochart component correctly reads the new data. However, the legend or color bar at the bottom does not funct ...
Currently, I am utilizing Vue.js and Quasar, along with a Vuex store. Although the properties that were initially present during the initialization of the store are reactive, none of the newly created properties on an object of the store seem to be reacti ...
https://i.stack.imgur.com/xO2MO.png I have a collection of items stored in a Vuex state. The issue arises when I select items from the main state and update it using v-on:change, as well as from the sidebar. However, upon toggling down with v-on:change on ...
Looking for help with using createPersistedState in a vuex and quasar setup. I've been attempting to save some data in the cookie of my application, but it doesn't seem to be working as expected. Any ideas on what could be going wrong? Apprecia ...
I'm working on building my blog and I've run into a roadblock while trying to implement a load more button. Here's what I currently have: actions: { LOAD_ARTICLE_LIST: function ({ commit }) { axios.get('someurl/articles').then((response) => { ...
I am facing an issue with fetching data from firebase using a store.js file that I have imported into the main.js. The problem is that the data does not display correctly when the page loads. However, when I check the console.log in mutations, it shows t ...
In the Vue Component code snippet below, I have a method: loadMaintenances (query = {}) { this.getContractorMaintenances(this.urlWithPage, query).then((response) => { this.lastPage = response.data.meta.last_page }) } I am trying to pass the par ...
Encountered an error with return this.$store.state.counter: The property '$store' does not exist on the type 'CreateComponentPublicInstance<{}, {}, {}, { counter(): any; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, ...
I am looking to store an object in Vue that will be accessible throughout the entire instance but does not need to be reactive. Typically, if I wanted it to be reactive, I would use 'data' like this: new Vue({ data: myObject }) However, since myObject ...
I've been tackling a table project using Quasar framework's Q-Popup-edit and Vuex Store. The data populates correctly initially. However, any changes made on the table do not seem to persist and revert back to their original values. Here is a snippet of ...
While exploring Vuex modules for the first time, I faced some difficulties. The console error message "rawModule is undefined" had me puzzled as there was not much information available on it. So, let me share with you the problem I encountered and how I ...
On the filter page, there is a functionality to toggle between different content options. | Filter | | content | Initially, the content displayed is in Ruby. When a filter is selected, the Ruby template should be hidden and replaced with content fetched ...
I've been racking my brain for the past couple of days trying to wrap my head around reactivity, but it's just not clicking for me yet. Here's the component in question: <template> <div class="tile-content"> <router-link :to="{ name: ...
I have developed an application using Vue and Vuex that connects to a Node/Express backend with Socket.IO to instantly push data from the server to the client when necessary. The data sent to the clients is in the form of objects, which are then stored in ...
I am currently working on a Vue.js and Firebase authentication interface with an email verification feature. The setup is such that the user cannot log in until they click the verification link sent to the email address provided during the login process. ...
Below is the Vue.js 2 code snippet for sending data to the backend. The vuex library was used to manage the data status. After using the POST function, the result returned from the backend updates the value of sampleId. This value is auto-generated by the ...
Whenever I try to call a Vuex action in my Vue file, the code crashes and disrupts the functionality of the site. I've simplified it down to the basics (just trying to console.log a string from within the action when a button tied to that action is cl ...
I am currently working on a web application that retrieves airport data from the backend. To manage states and data sharing, I am utilizing Vuex. My dilemma is whether to load the airports in my Vuex actions or within a method of my Vue instance which will ...
I am currently developing an admin panel using Vue.js and utilizing Vuex for state management. store/module/home/home.js: import instance from "../../../services/Http"; const state = { usersCount: 0, customersCount: 0, chefsCount: 0, d ...
I am encountering an issue while attempting to access the Vuex store in my router file. I am looking to define routes based on the data length stored in the Vuex state. Ideally, if the store's data is empty, I only require the Company List route to be di ...
There are two components in my code The first component, which is the parent component, looks like this : <template> <ul class="list-group"> <li v-for="item in invoices" class="list-group-item"> <div class="ro ...
Seeking a simple solution, all I need is to save data retrieved after an AJAX post in the Vue instance's data. See below for my code: const VMList = new Vue({ el: '#MODAL_USER_DATA', data: { user: []//, //userAcc: [] }, methods: { get ...
How can I effectively utilize the data fetched using the Vuex store's action in a specific component? import axios from 'axios' export default { namespaced: true, state: { items: [] }, actions: { fetchCategories ({state, commit}) { ...
I've encountered an issue with transferring data from Vue to Vuex. Whenever I attempt to send dates to vuex using 'let', axios fails to recognize these dates. However, if I input the dates directly into the axios request, everything works fi ...
In my Vuex mutation, I set an error message and use a setTimeout function to clear it after 5 seconds. This is how I implement it: setError(state, error) { state.error = error setTimeout(() => { state.error = null }, 5000) }, When h ...
Exploring the functioning vuex action called init which fetches a settings and an accounts collection: actions: { init: firestoreAction(({ bindFirestoreRef, commit }, payload) => { bindFirestoreRef( 'settings', fb.settings.doc(payload), ...
Can VueX be used to create a method in the mounted() function that waits for a mutation in another component to be executed? Sometimes this mutation is triggered before and other times after, so I am curious if it's possible to await its execution after t ...
I'm relatively new to using Vue/VueX and I am exploring methods for storing JSON data in the VueX state. Initially, it seemed like a simple task: state { jsonthing: { ... } } However, I encountered an issue where getters return an Observer type ins ...
I am looking to implement a mutation in Vuex that dynamically updates the state by specifying a path to the object from which I want to remove an element, along with the key of the element. Triggering the action deleteOption(path, key) { this.$store.d ...
When working inside a vue action, I am interested in continuously checking the status of my backend by calling another async action until a certain task is completed (there will be a loader on the frontend to show progress). To elaborate, I need to keep m ...
I'm new to Typescript and I'm exploring ways to add specific type structure to all Actions declared in Vue store without repeating them in every Vuex module file. For instance, instead of manually defining types for each action in every store fi ...
Currently, I am delving into a larger project using Vue and I find myself contemplating the best practices when it comes to utilizing props versus global Vuex states for accessing data within a component. To elaborate, let's say I have a component respons ...
My client-side rendered vue app fetches a json array from an API endpoint and displays data from each array item as a list item in an ordered list. During development, the data renders correctly locally using 'parcel index.pug' to set up my local dev envi ...
Currently, I am developing a VueJS application that involves a 5-step form completion process. The steps are linked to /step-1 through /step-5 in the Vue Router. However, my goal is for the site to return to the main index page (/) upon refresh. One solu ...
When developing dynamic web pages with Nuxt, I encountered an issue in the pages directory where a file named _url.vue is located. The contents of this file are as follows: <template lang="pug"> div component( v-for= ...
Is there a way to utilize Vuex state and access it in the methods property of components? I have a state called "currentThreadId" that I would like to use within my methods. The issue I am facing is being able to retrieve the "currentThreadId" from the Vu ...
Is there a way to implement a select element (preferably using v-select) that initially has no options, but will fetch the options only after at least 3 characters are typed in? Unlike most standard select elements where options are filtered as you type, I ...
Currently, I am working on developing an application using Laravel and VueJS (along with Vuex). Although I do not have much experience in working with these frameworks or front-ends, I am curious to know the best practices for utilizing the data received f ...
Could you please assist me? I have been trying for 10 hours straight and it doesn't seem to work. What I am aiming for is that when I click on @click="cleanDataForm" in the Parent Component, the v-model text in the Child component will be emptied. I h ...
Currently, I am working on making API calls from within a Vuex store action object. Here's an example of one of my actions: /** * Check an account activation token * */ [CHECK_ACTIVATION_TOKEN] ({commit}, payload) { Api.checkActivationToken(payl ...
I have been working on a slider with a modal that should open when an image is clicked. The modal state is stored in my Vuex store, and I need to dispatch an action from the image tag within my render function. While following Vue documentation, I have at ...
In my view components, I have a mixin that sets the metadata for each page. I'm retrieving the default metadata using Vuex in my store. When applying the mixin to each component, I include the "metadata" data attribute and set its value to the default ...
I delved into a Vuex course and the journey was smooth sailing until they introduced an arrow function in a getter, then utilized it in a computed property and action. Behold the code: item structure: const _products = [ { id: 1, title: "iPad 4 Mini", ...
Here is the code snippet from my app.js file. Can someone please review it and confirm if I have defined the items correctly according to the Vuex documentation? import store from "./store"; require('./bootstrap'); window.Vue = require('vue').def ...
I have a .vue component called Sectors, that I need to dynamically add to a container named "desktop_sectors" on desktop, or "mobile" on mobile devices. <v-flex sm12 md12 ma-2 ref="desktop_sectors"> v-flex sm12 ma-2 ref="mobile"> To avoid crea ...
One challenge I am facing is making API calls to retrieve an array of endpoints, which are then used to fetch data from another API. // Raise isLoading flag this.$store.commit('isLoading', true); // Initial data fetch this.$s ...
In my Vue.js application, I am able to create a constant through a store, but I have reservations about this practice. Can anyone suggest alternative methods to achieve the same outcome? ...
When watching a property from Vuex, I use the following approach: computed: { ticket() { return this.$store.getters['order/reservation'].offer_id } }, watch: { ticket(newTicketId) { console.log('Caught change of ...
I have a form without any input and my goal is to automatically set the "responsible clerk" field to the currently logged-in user when the component mounts. Here's what I have: <b-form-select v-model="form.responsible_clerk" :options ...
I am experiencing an issue with a getter that returns an array of objects. The challenge I face is that I need to display past and current warnings in separate components. The getter currently only retrieves the current warning and ignores any past warnin ...
Utilizing vue router for navigating with transitions and vuex to fetch and store data from a JSON API has been successful. The issue arises on routes that utilize the same component. After a route change, there is a momentary display of the old state of t ...
I am working on a vue application and I have a query. How can I access the store from javascript/typescript modules files using import/export? For example, if I create an auth-module that exports state, actions, mutations: export const auth = { namesp ...
After reading some articles on the topic, I am still struggling to understand it completely. This is my current issue: I have a component in Nuxt <a @click="openMenu">Open Menu</a> <div v-if="isUserNav"> ... </div> Essentially, ...
Currently delving into the world of Vuex for the first time as I develop an application in Vue.js. The complexity of this project requires a singleton storage object that is shared across all components. While Vuex appears to be a suitable solution, I am s ...
Form Structure: <card-wrapper v-for="(passenger, index) in form.passenger" :key="index" :icon="['fas', 'user']" :title="`Passenger ${index + 1}`" class="mb-5" > <validation-observer ...
Latest Update To view the issue on VueX git repository that has been created, please follow this link: https://github.com/vuejs/vuex/issues/1509 If you want to replicate the problem, here is the link to the repository: https://github.com/djam90/vuex-vue- ...
I am working with vuex and using a store module to load user lists in my app through ajax. After the list is loaded, it doesn't fetch again if it's already present in the vuex store. I have implemented this logic in the main application layout asynchronous ...
I'm currently utilizing nuxt js for my web application and I am seeking a method to retain the store data even after refreshing the page, whether it be in middleware or on the page itself. To achieve this, I am making use of vuex-persistedstate; impor ...
<script setup> import { useLayout } from '@/layout/composables/layout'; import { ref, computed ,onMounted} from 'vue'; import AppConfig from '@/layout/AppConfig.vue'; import auth from '@/auth'; const { layoutConfig, contextPath } = useLayout(); con ...
I am looking to enhance my project by implementing a filtering feature. I currently have a buttons component that will trigger the filter search. When I click the restaurant button, it should display the shops with a "Restaurant" value in Firestore. Conv ...
I am trying to figure out how to pass data from the Module variable in CoreMods.vue to ExternalWebpage.vue using Vuex. I want the CoreModule state to be watched for changes in the external webpage. This is my store.js setup: import Vue from 'vue ...
I've hit a roadblock while setting up Vuex modules for my latest project. I attempted to follow Chris Fritz's example of registering components in a more efficient manner, as demonstrated in this video: https://www.youtube.com/watch?v=7lpemgMhi0k ...
Currently, I am diving into the world of Vuex and encountering some challenges along the way. In my attempt to create a getter on my vuex instance, I am facing an error when trying to display data from one of my components: The getter should be a functi ...
I am currently working on a Quasar application and utilizing VueX to manage the state of my app. However, I am encountering an issue when trying to update properties within a for loop. Despite inputting values, they do not seem to be getting set in the st ...
I'm still learning about Frontend/Backend Architecture, but I recently built a basic REST Backend using NODE.js. Now I want to develop a Frontend with Vue.js and Framework7. Should I incorporate VUEX for this project? How do you manage sessions and h ...
Is it possible to fetch data in App.vue and pass the value to this.store.data so that it can be used for all other components? The issue I am facing is that when I click on the link (router-link), the function inside the components runs before fetching dat ...
Vue.js has a special place in my heart, especially its computed properties and the magic of Vuex getters. However, I've reached a crossroads where I'm unsure if my current approach may be impacting performance. This pattern features prominently in my code ...
Currently, while working on my NUXT project, I am facing a situation where I find myself repeatedly copying the same actions into multiple store modules. To streamline this process, I have extracted these actions into a separate file and now import them in ...
import { mapState } from 'vuex' ...mapState({ activeUsers: (state) => { return _.filter(state, data => { return _.includes(this.activeUserIds, data.id) }) } }) Instead of calling this.allUserIds in the map state fun ...
Currently, I am utilizing Vuex for state management within my VueJS 2 application. Within the mounted property of a specific component, I trigger an action... mounted: function () { this.$store.dispatch({ type: 'LOAD_LOCATION', id: thi ...
I'm currently pondering the optimal amount of data to store in a Vue data object. Imagine I have over 4,000 objects structured like this: personWithAppointment = { id: 1, appointment_id: 1, first_name: 'Jim', last_name: 'Jim', // +20 more simila ...