in Education by
I have two functions in my store, one that gets data by calling API and one that toggles change on cell "approved". Everything working fine, except that when I toggle this change it happens in database and I get the response that it is done but It doesn't update on UI. I am confused, what should I do after toggling change to reflect change on UI, should I call my API from .then or should I call action method responsible for getting data from server. export default { state: { drivers: { allDrivers:[], driversError:null }, isLoading: false, token: localStorage.getItem('token'), driverApproved: null, driverNotApproved: null }, getters: { driversAreLoading (state) { return state.isLoading; }, driverError (state) { return state.drivers.driversError; }, getAllDrivers(state){ return state.drivers.allDrivers } }, mutations: { getAllDrivers (state) { state.isLoading=true; state.drivers.driversError=null; }, allDriversAvailable(state,payload){ state.isLoading=false; state.drivers.allDrivers=payload; }, allDriversNotAvailable(state,payload){ state.isLoading=false; state.drivers.driversError=payload; }, toggleDriverApproval(state){ state.isLoading = true; }, driverApprovalCompleted(state){ state.isLoading = false; state.driverApproved = true; }, driverApprovalError(state){ state.isLoading = false; state.driverError = true; } }, actions: { allDrivers (context) { context.commit("getAllDrivers") return new Promise((res,rej)=>{ http.get('/api/admin/getAllDrivers').then( response=>{ if (response.data.success){ let data=response.data.data; data=data.map(function (driver) { return { /* response */ }; }); context.commit("allDriversAvailable",data); res(); }else { context.commit("allDriversNotAvailable",response.data) rej() } }) .catch(error=>{ context.commit("allDriversNotAvailable",error.data) rej() }); }); }, toggleDriverApproval (context, payload){ return new Promise((res, rej)=>{ http.post("/api/admin/toggleDriverApproval",{ driver_id: payload }) .then( response => { context.commit('driverApprovalCompleted'); res(); }).catch( error =>{ context.commit('driverApprovalError'); rej() }) }) } } } and here is the code on the view, I wrote the necessary code for better clarification of the problem export default { name: 'Drivers', data: () => ({ data: [], allDrivers: [], driversErrors: [] }), created() { this.$store .dispatch('allDrivers') .then(() => { this.data = this.$store.getters.getAllDrivers }) .catch(() => { this.errors = this.$store.getters.driverError }) }, computed: { isLoading() { return this.$store.getters.driversAreLoading } }, methods: { verify: function(row) { console.log(row) this.$store.dispatch('toggleDriverApproval', row.id).then(() => { this.data = this.$store.getters.getAllDrivers console.log('done dis') }) }, }, } JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by
if I understand your issue, you want the UI displaying your data to change to the updated data after making a post request. If you are using Vuex you will want to commit a mutation, and use a getter display the data. I am not sure how your post request is being handled on the server but if successful typically you would send a response back to your front end with the updated data, and commit a mutation with the updated data. Example: Make a Post request toggleDriverApproval (context, payload){ return new Promise((res, rej)=>{ http.post("/api/admin/toggleDriverApproval",{ driver_id: payload }) .then( response => { context.commit('driverApprovalCompleted', response.data); res(); }).catch( error =>{ context.commit('driverApprovalError', error.response.data); rej() }) }) } If succesful commit the mutation .then( response => { context.commit('driverApprovalCompleted', response.data); res(); }) response.data being your data you want to mutate the state with. Mutation Example: customMutation(state, data) { state.driverApproval = data } Getter Example: driver(state) { return state.driverApproval } displaying the getter in a template
{{driver}}
import {mapGetters} from 'vuex' export default { name: Example, computed: { driver() { return this.$store.getters.driver }, // or use mapGetters ...mapGetters(['driver']) } } more examples can be found at Vuex Docs

Related questions

0 votes
    Basically I need to add the script to the head of my index.html, so what I've tried is... in ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 12, 2022 in Education by JackTerrance
0 votes
    Basically I need to add the script to the head of my index.html, so what I've tried is... in ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 10, 2022 in Education by JackTerrance
0 votes
    I am developing a single-page-application using vue-cli3 and npm. The problem: Populating a basic integer ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    I am developing a single-page-application using vue-cli3 and npm. The problem: Populating a basic integer ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 24, 2022 in Education by JackTerrance
0 votes
    I have created a fiddle to explain what I want : https://jsfiddle.net/silentway/aro5kq7u/3/ The ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 26, 2022 in Education by JackTerrance
0 votes
    Tell me how to make it so that when you click on a button from a cycle with page numbers, this ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    recently I started to work on Vue js and I want to use a javascript plugin like Isotope also I ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 13, 2022 in Education by JackTerrance
0 votes
    I have set up Vue so that I have a top level AppLayout component which just includes a Navigation Menu ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 20, 2022 in Education by JackTerrance
0 votes
    I'm trying to get a modal to pop up on cellClick. I'm not getting any errors, but it's not ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 14, 2022 in Education by JackTerrance
0 votes
    In state-space, the set of actions for a given problem is expressed by the_____. Intermediate States Successor function ... and returns next state Initial States None of the above...
asked Mar 8, 2021 in Technology by JackTerrance
0 votes
    I've had several occasions in my selenium tests where I decided to use Selenium's click_and_hold() (source ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 26, 2022 in Education by JackTerrance
0 votes
    Asynchronous update ensures that the next state is atmost unit hamming distance from current state, is that true? ... Networks of Neural Networks Please answer the above question....
asked Aug 30, 2022 in Education by JackTerrance
0 votes
    Why should we not update the state directly in React?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    Write a JAVA program to store the temperature in Celsius and convert it into Fahrenheit using the following formula ... INPUT METHOD Select the correct answer from above options...
asked Dec 22, 2021 in Education by JackTerrance
0 votes
    5. Write a program to read and store the following data in two different arrays. Using Binary Search Method search for ... 85, 72, 89 Select the correct answer from above options...
asked Dec 15, 2021 in Education by JackTerrance
...