Questions tagged [vuex]

1

votes
1

answer
2.5k

Views

Vue.js2.0 - vue reactivity confusion

In my project , i have a shoppinglists Array to get displayed. When the component is mounted, the store is populated ( it' conatins only one array for the logged customer, fetched from the API db server... wo any problem) On dissplay, I get the following message : vue.esm.js?efeb:571 [Vue warn]: Pro...
1

votes
2

answer
48

Views

Prevent Select Input value change conditionally

I have this vue component: the value of the select input is bound to the Vuex store like this: computed: { curDocType: { get () { return this.$store.state.curDocType }, set (value) { this.$store.commit('setcurDocType', value) } } } What I can't figure out is how to conditionally prev...
Jack Casas
1

votes
2

answer
158

Views

Is mutating a property of a prop with v-model bad practice?

The vue.js docs are quite strict in saying that mutating props inside of the component is bad practice. Also there are two cases described, in which a developer may be tempted to break this rule: When setting a default value When the given prop values should be mutated. Since I started with vue.js I...
Nico O
1

votes
1

answer
43

Views

Which is the best way to pass data component to component in vue js [closed]

I have seen there are many ways to pass data component to component in vue js but I want to know which is the best way from listed below 1) Vuex store.commit('anyMethod'); 2) $root : With emit an event useing $root this.$root.$emit('eventName',data) 3) Server Bus : Where we have to create and a n...
Parth Jasani
1

votes
0

answer
254

Views

How to get Vue routes from the API call

I am building a dashboard site using Laravel and Vue.js.There are many people who are using my App. Some of them are admins, while others are normal users. In the left-side bar, there are many categories. For example in this picture Components is only accessed by the admin. The question is how to p...
Cholowao
1

votes
1

answer
80

Views

Vuex and Laravel 5: how to remove Tags from Articles

I have a small blog app that has Articles and Tags. Nothing fancy so far. Every Article can have many Tags. The Laravel backend delivers the data via API calls from Axios in the Vue Frontend. In the Laravel models Article has a method public function tags(){ return $this->belongsToMany('App\Tag'...
shopfreelancer
1

votes
0

answer
340

Views

Vue JS : Dispatching action in Vuex doesn't return the value

I'm using Vuetify for my project and I have a expandable Datatable row that when it clicks, gonna retrieve the data from server side base on ID of the row. However, can't find a right way to implement in the framework so trying to do it itself. So here I have my datatable and notice that I have a fu...
1

votes
0

answer
449

Views

Mutate a Vuex Store data array from Component.vue

I am using a Vuex approach along with a Socket.io. Having a Vuex store data requested inside my main app.js, I try to mutate a Store list within a custom Component.vue. I want to mutate/replace an Object item item.priority value of Critical with a new value and display the final mutated list insid...
aspirinemaga
1

votes
1

answer
1.2k

Views

How to watch two more stores in Vue.js and Vuex?

I'm using Vue.js and Vuex. I want to watch the value of store (I'll share my sample codes in the last of this post). But I have encountered the error 'Error: [vuex] store.watch only accepts a function.' In this Web site, I found how to use 'single' store. https://codepen.io/CodinCat/pen/PpNvYr Howev...
ketancho
1

votes
1

answer
195

Views

Selenium ide is not recording the click on vue-star-rating component

I was using selenium ide for automated testing. Everything else works fine but selenium is not recording the click on vue-star-rating. It not picking up any Xpath/CSS selector either. Can anyone please tell me if they had same issue and if they found any solution to it
Haseeb Rehman
1

votes
0

answer
169

Views

Can someone give me an example of using time travel debugging on vuex?

I did google vuex time-travel debugging, e.g. Using the Vue.js Devtools I also tried it myself on TodoMVC, so I get the basic idea of it, like roll back to the previous state. But I still don't see how it would help me debug my code. So can someone give a specific example of using it to catch a bug...
Qiulang
1

votes
0

answer
294

Views

The best way to organise components in Vuejs

The image below represents mock-up that we need to implement and I'm going back and forth on how to organize our vue components. This form will be used to create users but also it will be used to edit users, edit my profile and creating initial user when creating company (business request). The thin...
kljuco
1

votes
1

answer
338

Views

Why am I getting “rawModule is undefined” when adding Vuex modules?

I recently was struggling with implementing modules in Vuex for the first time. I couldn't find much info on the console error message I was getting ( rawModule is undefined ), so I thought I'd share the issue I ran into and the solution. I was doing a quick, simple version of a module implementatio...
ktbee
1

votes
0

answer
96

Views

Vuex: Referencing specific state data in getter

I have to pull in data from 12 specific departments. When my Vue store gets mounted, I fire off some actions to load in these orders via 12 different ajax calls. (These calls are to different API end points and servers). Once I get a response I commit them to the state. So in my state I would have t...
thindery
1

votes
1

answer
778

Views

Can't get state stored by Vuex in ~/plugins/axios.js

I have problem to get token stored by Vuex in ~/plugins/axios.js. Hope your guys take a look for me please. My Vuex: ~/store/index.js export const state = () => ({ authUser: null, token: null }) export const mutations = { SET_USER: function (state, user) { state.authUser = user }, SET_TOKEN: functio...
KitKit
1

votes
0

answer
290

Views

Vuex persistedstate reset logged in user

This is something weird. I want to save vuex store to be persistent on page reload. I use js-cookie and vuex-persistedstate, however, when the page is reloaded the user is half logged in, in my specific case each user has role and depending on that role he has some restriction on the back-end. When...
lejhbah
1

votes
0

answer
557

Views

Vue.js + Element - losing active menu item class when toggling menu

I'm using Element.eleme.io UI library with Vue.js 2+ and building a vertical sidebar (docs: http://element.eleme.io/#/en-US/component/menu ) The problem is, when I toggle the menu to expand/collapse, I'm losing my currently selected/active menu item (in docs it always revers to default one for examp...
lukaszkups
1

votes
1

answer
335

Views

Open socket connection in component

Following official doc vue-socketio i init socket in store.js. import VueSocketio from 'vue-socket.io' import socketio from 'socket.io-client' Vue.use(VueSocketio, socketio(process.env.SOCKET_PATH), store) But socket opens right after project is openned. Can i avoid this string Vue.use(VueSocketio,...
ItsMyLife
1

votes
0

answer
98

Views

Vuex Actions Reactivity

I discovered strange issue: action in one vuex component uses getters of other vuex components but this action is used nowhere and it refreshes state of it's vuex component but it itself refreshes (=is executed) automatically when it's dependencies are refreshed So I want to know. May I depend on su...
Jerry Lynn
1

votes
0

answer
77

Views

Multiple named components with different state

So I am trying to use multiple instances of a component inside a parent component. I am currently using a Vuetify.js tab-control to display each component. For each child component I want to load different dynamic data from a external Rest API. My preferd way to approach this is to pass a prop down...
simonkaspers1
1

votes
1

answer
247

Views

Why does vuex not fill my v-data-table?

I have a component with a veutify datatable in it. This is connected to my vuex store, and upon loading the component it should fill the table with data. Upon loading I can see the data being fetched and getting in the store OK, but the table does not update. Any ideas what Im doing wrong? Table-com...
klas mack
1

votes
0

answer
66

Views

Vuex Sockets with Node.js

I'm using vuex with socket on ubuntu and mac. when i return data object from server socket (node.js), the socket get different data for each operation system: - ubuntu data returns array with the object in his first element - mac data returns the object itself i don't understand why it return differ...
korenfine
1

votes
1

answer
923

Views

Vue.js “Watch” not firing on simple boolean value change

The 'Watch' event isn't firing in a Vuex Store. This is pretty basic. It's no more complicated than the example in the help. Does Watch not work in a store? (All the answers I could find were regarding Angular.) -Thanks in store.js state: { warningSwitch : false, } (...) watch: { warningSwitch: fu...
Curt Doolittle
1

votes
0

answer
93

Views

Vuex internal dependencies

What is the best practice to solve such situation: state of one vuex component depends on state of another this refresh of the first component must be done via action (asynchronous operations) Now I do it from the visual vue component, in the place, where mutation of the second vuex component is com...
Jerry Lynn
1

votes
1

answer
25

Views

Mutation committed but state not updated

I have my mutation committed, but the currentCampaign state is not updated instead returns undefined. Below is the screenshot. This is the store. import Vuex from 'vuex' import Vue from 'vue' import axios from 'axios' Vue.use(Vuex); export const store = new Vuex.Store({ state: { campaigns: '', curre...
Justin
1

votes
1

answer
1.2k

Views

Component not updating on store change - Vuex

TLDR: I recorded a video explaining my issue if that helps. https://youtu.be/Qf9Q4zIaox8 Navbar component is not updating on store change. I have separated my component into two sections using a v-if and v-else. When the user is logged in the v-if shows and when the user is't logged in, the v-else...
Lorza
1

votes
2

answer
124

Views

why is vuex store only available after setTimeout?

I have a lib which imports the vuex store import {store} from './index' and that index file has an constant export like export const store = new Vuex.Store({ ... in the file I'm doing the import, I wanted to use something from the store after the import, but store was undefined. if I wrapped my stor...
Yehosef
1

votes
1

answer
1.1k

Views

vue, vuex, vue-i18n change language button event

Why changing mutation do not update page in new language? main.js : here I implemented vue-i18n with vue: import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import VueI18n from 'vue-i18n' import locales from './locales' import router from './router' impor...
Ahmad Ebrahimi
1

votes
1

answer
203

Views

vue.js and django. action, component updating, function execution

Purpose of vue.js components Aim of DataTable component is to display backend database' data. Aim of NewDataPanel.vue component is to add data to backend database. Required behavior After creating new data via NewDataPanel it should appear in backend database and at the DataTable. Problem After crea...
AlGiorgio
1

votes
0

answer
1.4k

Views

Vue.js vue-router: How to go back without a page reload?

Here is the crux of the problem: Things to note: The query is updated in vuex on input/search After a product click, a user is moved using user.push('/product/'+ asin) When moving back, I tried both router.push('/') as well as router.go(-1) Every time the user returns, the value of query is lost and...
dsp_099
1

votes
1

answer
788

Views

vue.js 2.0 Reset props passed to modal component on close

I have a account component which allows the user to click on the current billing address and a modal opens with a form to update their billing address. The billing address is passed as a prop to the child (modal) component as such If the user edits the any field but then decides to close the modal a...
David Turton
1

votes
1

answer
1.4k

Views

vuex empty state on logout

Quick story of my problem: Absolutely no data is stored in my vuex state when the page loads If the user is logged in(or has info stored in window.localStorage and therefore gets auto logged in) my vuex store retrieves all the info from a socket that requires authentication. Then the user logs out,...
DrevanTonder
1

votes
0

answer
34

Views

how to write routes in a laravel + vuejs 2 + vue-router + vue-axios project?

this is how i've set the files in /ressources/assets/js/ file: /js/router/index.js & /js/router/mainRoutes.js, i wish to put my routes in mainRoutes.js /js/store/index.js for state management (this is how i code in a solely vuejs project) my app.js file: const app = new Vue({ el: '#app', router, st...
Michel Tchoutang
1

votes
2

answer
1.8k

Views

Persistent state using vuex-persistedstate: store state in first tab doesnot update when i mutate state in another tab

Hi I am using vuex persistedstate to persist my state. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [createPersistedState()] }) What I want to do is update a store state in another tab and the updated store state should be reflected in other o...
wrufesh
1

votes
1

answer
31

Views

Vuex : compose a state item from several pieces of state

Suppose my Vuex store has the following members in state: numberOfClicks productID addCartTime purchaseTime numberOfProducts visitProfile All state members are updated updated via user interaction with the app except the last one, visitProfile, which is a composite formed by merging numberOfClicks...
bresson
1

votes
0

answer
223

Views

How to preload Vuex store with session information in server-rendered app

When using vue-ssr, you cannot access localStorage, so nothing related to the initial state configuration can depend on it. This creates a problem for me, because I was using JWT in localStorage to set the default state of session module of my store: export default { state: { currentUser: !!localSto...
Marc Fletcher
1

votes
0

answer
56

Views

VueX: populating associations between modules

I'm trying to build my store as closely to a REST API as possible. Now I load 2 modules from the API directly into the sotre, where one of them can be referenced in the other one. For example: Each Car in my Car module has an Engine attribute which is a number. That number refers to the ID of an En...
Philip Feldmann
1

votes
1

answer
1.1k

Views

Vuex, computed properties are not reactive

I trying to have a state shared between some components (sub-components) that where each sub-combonent (and parent component) can update the shared property (store in vueX state). I have make a small 'How to reproduce' here: Vue.component('urlQueryComponent', { template: 'object: {{pathQuery}}', com...
Heziode
1

votes
1

answer
310

Views

Why is my getter from store in App.vue class undefined

I am building an electron app using vue, vuex and vuex-typescript. So I have the following code for my store using vuex-typescript: export const dispaVuex = { namespaced: true, state: { dispatch: new Dispatcher(appState), }, getters: { getFTime(state: DispatchState): boolean { return state.dispatch....
Yazeed Sabri
1

votes
0

answer
25

Views

vuex state pre-fetching doesn't work

I am facing an issue regarding vuex, in my vue component i dispatch a store request and then in computed hook i map the store state and the first time it returns null ,i think it starts mapping before state is being stored. Here is code index.vue file code, export default { name: 'tab_3', data ()...
Danish Saber

View additional questions