i am using Vue 2 / nuxt to emit from a axios post* call which itself is called from a Buefy dialog confirm. The emit from this component will close the window / panel and then re-load the users.
If I call the axios request from the button, this works without any issues, but once being called from the dialog, it just don't work?
*most likely this will be updated to a delete request, just not gotten to that let
See code below:
removeUser() {
this.$buefy.dialog.confirm({
message: 'Continue on this task?',
onConfirm: () => {
this.removeUserFunc()
}
})
},
removeUserFunc() {
// console.log(that)
const that = this
// Build URL
const EndPoint = '/remove_user/' + this.id
this.$axios.post(EndPoint).then((res) => {
// User Remove Message
UserRemoved(this.$swal)
that.$parent.$emit('completed')
// console.log(this.$emit('complete'))
// // Emit 'completed' Message
console.log(that.$emit('completed'))
console.log(that)
}).catch((res) => {
console.log(res)
// Check For Errors
GeneralError(this.$swal)
})
}
I was thinking it was losing access to the correct this, so i was trying to pass that back in, but not sure that is the case?
I have also tried with await, while that sort of works? I think is firing the emit too fast, as it re-loads the users but it still includes the user that as just been deleted?
removeUser() {
this.$buefy.dialog.confirm({
message: 'Continue on this task?',
onConfirm: async() => {
this.removeUserFunc()
await this.$emit('completed')
}
})
},
The this keyword refers to the object the function belongs to, or the window object if the function belongs to no object.
Try to use .bind and use a ES5 function
removeUser() {
this.$buefy.dialog.confirm({
message: 'Continue on this task?',
onConfirm: function() {
this.removeUserFunc()
}.bind(this)
})
},
Related
So I am using Vue Draggable and I am to access the event object in VueJs like below:
<draggable group="leads"
:list="newLeads"
#change="seeChange($event, 'New')">
In methods:
async seeChange(event, status) {
console.log(event.added.element.id);
await axios.patch('http://localhost/api/leads/'+event.added.element.id+'/update-status',
{status : status}).then(response => {
this.leads.unshift(response.data.data);
this.getLeads();
}).catch(error => {
console.log(error);
});
},
I can see the id in the console. But when I drag the card (triggering the event) I get a
Cannot read properties of undefined (reading 'element')
error when the card lands. Even the Axios call gets the correct id and the request is sent fine. But the white screen with this error appears nonetheless.
What am I missing?
Change event is called with one argument containing one of the following properties: added, removed, moved. Docs.
event.added contains information of an element added to the array but when you do removed, moved you haven't property added in object event.
You can use it like this:
async seeChange(event, status) {
console.log(event?.added.element.id);
if(event.added) {
await axios.patch('http://localhost/api/leads/'+event.added.element.id+'/update-status', {status : status}).then(response => {
this.leads.unshift(response.data.data);
this.getLeads();
}).catch(error => {
console.log(error);
});
}
}
request will be send only after added event.
If you want to send request on each event you can do it
by using Object.values(event)[0], example:
async seeChange(event, status) {
const id = Object.values(event)[0].element.id;
console.log(id);
await axios.patch('http://localhost/api/leads/'+id+'/update-status', {status : status}).then(response => {
this.leads.unshift(response.data.data);
this.getLeads();
}).catch(error => {
console.log(error);
});
}
in vue 3 you should use draggable library as below:
install:
npm i -S vuedraggable#next
import:
import Draggable from 'vuedraggable';
and this is the link with full examples:
https://github.com/SortableJS/vue.draggable.next
this is my router guard :
router.beforeEach(async (to,from,next)=>{
await store.dispatch('GetPermission');
if(to.matched.some(record => record.meta.requireAuth)){
let permissions=store.state.permissions; //getting empty
console.log(permissions);
if(permissions.filter(per => (per.name === 'read_list').length!=0)){
next({
path:'/dashboard/create'
})
}
else{
next()
}
}
// else if(to.matched.some(record => record.meta.requireAuth)){
// if(store.token!=null){
// next({
// path:'/dashboard'
// })
// }
// else{
// next()
// }
// }
else{
next()
}
});
problem is here though i m using await in dispatch method , i m not getting state value of permissions which is initially empty
here is vuex store code :
GetPermission(context){
axios.defaults.headers.common['Authorization']='Bearer ' + context.state.token
axios.get('http://127.0.0.1:8000/api/user').then((response)=>{
console.log(response)
context.commit('Permissions',response.data.permission)
})
//mutation:
Permissions(state,payload){
state.permissions=payload
}
//state
state:{
error:'',
token:localStorage.getItem('token') || null,
permissions:'',
success:'',
isLoggedin:'',
LoggedUser:{}
}
help me to solve it please ??
actions in Vuex are asynchronous. The only way to let the calling function (initiator of action) to know that an action is complete - is by returning a Promise and resolving it later.
Here is an example: myAction returns a Promise, makes a http call and resolves or rejects the Promise later - all asynchronously
actions: {
myAction(context, data) {
return new Promise((resolve, reject) => {
// Do something here... lets say, a http call using vue-resource
this.$http("/api/something").then(response => {
// http success, call the mutator and change something in state
resolve(response); // Let the calling function know that http is done. You may send some data back
}, error => {
// http failed, let the calling function know that action did not work out
reject(error);
})
})
}
}
Now, when your Vue component initiates myAction, it will get this Promise object and can know whether it succeeded or not. Here is some sample code for the Vue component:
export default {
mounted: function() {
// This component just got created. Lets fetch some data here using an action
this.$store.dispatch("myAction").then(response => {
console.log("Got some data, now lets show something in this component")
}, error => {
console.error("Got nothing from server. Prompt user to check internet connection and try again")
})
}
}
Also,you are calling same route when no permission match, in that case it always call your same route and make infinite loop.
Redirect to access denied page if permission denied.
I have a few components that can be separate or on the same page. Each of these components uses the same Vuex state. Since they can each be used on other pages and still work, each of them dispatches a call to the same Vuex action which in turns calls a service that uses axios to get the JSON data.
All of this works great!
However, when I do have 2 (or more) of these components on a single page, that axios call gets called 1 time for each of the components. Initially, I went down the path of trying to see if data existed and get created a "last got data at" timestamp so I could just bypass the 2nd call. However, these are happening both on the components created event and are being essentially called at the same time.
So, enter debounce. Seems like the exact reason for this. However, when I implement it, it fails and is passing on to the next line of code and not awaiting. What am I doing wrong?
Agenda Component (one that uses the same state)
async created() {
await this.gatherCalendarData();
},
methods: {
async gatherCalendarData() {
await this.$store.dispatch('time/dateSelected', this.$store.state.time.selectedDate);
},
},
Month Component (another, notice they are the same)
async created() {
await this.gatherCalendarData();
},
methods: {
async gatherCalendarData() {
await this.$store.dispatch('time/dateSelected', this.$store.state.time.selectedDate);
},
},
The Action getting called
async dateSelected(context, data) {
let result = await getCalendarData(isBetween.date, context.rootState.userId);
await context.commit('SET_MONTHLY_DATA', { result: result.Result, basedOn: isBetween.date });
},
This getCalendarData method is in a service file I created to make api calls (below.)
This is the error that I receive (once for each component) that calls this action.
[Vue warn]: Error in created hook (Promise/async): "TypeError: Cannot read property 'Result' of undefined"
Which is referring to the 3rd line above: result: result.Result
API Service
const getCalendarData = debounce(async (givenDate, userId) => {
let response = await getCalendarDataDebounced(givenDate, userId);
return response;
}, 100);
const getCalendarDataDebounced = async (givenDate, userId) => {
let result = await axiosGet('/api/v2/ProjectTime/BuildAndFillCalendarSQL', {
givenDate: givenDate,
userID: userId,
});
return result;
};
Axios Wrapper
const axiosGet = async (fullUrl, params) => {
let result = null;
try {
let response = await axios.get(fullUrl, params ? { params: params } : null);
result = await response.data;
} catch(error) {
console.error('error:', error);
}
return result;
};
If I put console.log messages before, after and inside the getCalendarData call as well as in the getCaledarDataDebounced methods: (assuming just 2 components on the page) the 2 before logs show up and then the 2 after logs appear. Next the error mentioned above for each of the 2 components, then a single 'inside the getCalendarData' is logged and finally the log from within the debounced version where it actually gets the data.
So it seems like the debouncing is working in that it is only run a single time. But it appears that await call let result = await getCalendarData(isBetween.date, context.rootState.userId); is not truly Waiting.
Am I missing something here?
EDITS after Answer
Based on #JakeHamTexas' answer, my action of dateSelected is now (actual full code, nothing removed like above as to not confuse anything):
async dateSelected(context, data) {
console.log('dateSelected action');
let isBetween = isDateWithinCurrentMonth(data, context.state);
if (!isBetween.result) {
// The date selected is in a different month, so grab that months data
return new Promise(resolve => {
getCalendarData(isBetween.date, context.rootState.userId)
.then(result => {
console.log('inside promise');
context.commit('SET_MONTHLY_DATA', { result: result.Result, basedOn: isBetween.date });
context.commit('SET_SELECTED_DATE', isBetween.date);
context.commit('statistics/TIME_ENTRIES_ALTERED', true, { root: true });
resolve();
});
});
} else {
// The date selected is within the given month, so simply select it
context.commit('SET_SELECTED_DATE', data);
}
context.commit('CLEAR_SELECTED_TIME_ENTRY_ID');
},
And my API call of getCalendarData is now:
const getCalendarData = async (givenDate, userId) => {
console.log('getting calendar data');
let result = await axiosGet('/api/v2/ProjectTime/BuildAndFillCalendarSQL', {
givenDate: givenDate,
userID: userId,
});
return result;
};
The error is gone! However, it does not seem to be debouncing - meaning everything gets called 3 times. I would expect the dateSelected action to be called 3 times. But I would like to avoid the getting calendar data being called 3 times. If it helps, this is what the console looks like:
dateSelected action
getting calendar data
dateSelected action
getting calendar data
dateSelected action
getting calendar data
inside promise
inside promise
inside promise
You need to return a promise from your action. Returning a promise of undefined (which is what is currently happening) resolves immediately.
dateSelected(context, data) {
return new Promise(resolve => {
getCalendarData(isBetween.date, context.rootState.userId)
.then(result => {
context.commit('SET_MONTHLY_DATA', { result: result.Result, basedOn: isBetween.date });
resolve();
}
}
},
Additionally, a vuex commit does not return a promise, so it doesn't make sense to await it.
Here is an _onPress in my react native app. The purpose of this function is to retrieve the user object and pass it to the next component after the user clicks an item. async/await is used for the db retrieval in _getUser. I can see the user object on the server but myself receives nothing and is empty. I am not sure why the myself is empty. Should _getUser be called in the constructor instead?
async _onPress(id) {
let myself = await _getUser();
if (!myself) console.log("_getUser return nothing in Chat!");
this.props.navigation.navigate("Chat", {eventId: id, user: myself});
}
As _getUser() is returning promise and probably _onPress is getting called directly from ToucableOpacity or some touch responder button, you can resolve promise and then take necessary action like:
_onPress(id) {
_getUser()
.then((data) => {
if (!data) {
console.log("_getUser return nothing in Chat!");
return
}
this.props.navigation.navigate("Chat", { eventId: id, user: data });
})
.catch(err => { console.log(err) })
}
I have two routes — one is a public router and the other is the authorized router.
In my authorized router I have an authorizeStep.
The authorizedStep checks if there is a token in localStorage and if it is returns a next().
However if it fails to find a token its supposed to stop and jump out returning to the public router.
I am having trouble stopping the authorized step and instead going to the public router.
I have:
run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> {
return Promise.resolve()
.then(() => this.checkSessionExists(navigationInstruction, next)
.then(result => result || next())
);
}
checkSessionExists(navigationInstruction: NavigationInstruction, next: Next) {
const session = this.authService.getIdentity();
if (!session) {
// HOW DO I CANCEL THE NEXT HERE AND GO TO THE PUBLIC ROUTER?
return next.cancel(new Redirect('login'))
}
return next()
}
forceReturnToPublic() {
this.authService.clearIdentity();
this.router.navigate("/", { replace: true, trigger: false });
this.router.reset();
this.aurelia.setRoot("public/public/public");
}
I have the function forceReturnToPublic() however I want to go and cancel the next() then go directly to the other router... I dont want to redirect..
How do I cancel the next in the promise and reset the router?
Here is my boot.ts which should kick it back to public but I dont know how to jump out of the promise cleanly...
// After starting the aurelia, we can request the AuthService directly
// from the DI container on the aurelia object. We can then set the
// correct root by querying the AuthService's checkJWTStatus() method
// to determine if the JWT exists and is valid.
aurelia.start().then(() => {
var auth = aurelia.container.get(AuthService);
let root: string = auth.checkJWTStatus() ? PLATFORM.moduleName('app/app/app') : PLATFORM.moduleName('public/public/public');
aurelia.setRoot(root, document.body)
});
If I place the forceReturnToPublic() in place of the return next.cancel(new Redirect('login') it goes into and endless loop with errors.
EDIT
I found THIS question which indicates I should add "this.pipeLineProvider.reset()" so I did - like this...
forceReturnToPublic() {
this.pipelineProvider.reset();
this.authService.clearIdentity();
this.router.navigate("/", { replace: true, trigger: false });
this.router.reset();
this.aurelia.setRoot("public/public/public");
}
Whilst it goes straight back to the public route I get an error in the console.
aurelia-logging-console.js:47 ERROR [app-router] Error: There was no router-view found in the view for ../components/clients/clientList/clientList.
at _loop (aurelia-router.js:281)
at NavigationInstruction._commitChanges (aurelia-router.js:307)
at CommitChangesStep.run (aurelia-router.js:143)
at next (aurelia-router.js:112)
at iterate (aurelia-router.js:1272)
at processActivatable (aurelia-router.js:1275)
at ActivateNextStep.run (aurelia-router.js:1161)
at next (aurelia-router.js:112)
at iterate (aurelia-router.js:1191)
at processDeactivatable (aurelia-router.js:1194)
I was clicking on the clientList nav link which does have a router-view..
How/where do I place the pipelineProvider.reset()? (if this is the problem)
But what I really want is...
How do I stop this router and cleanly move to the other router?
As you do I keep trying things.. This worked for me as I believe the pipelineProvider needed to finish before moving to the next step.. So I used a promise like so:
forceReturnToPublic(): Promise<any> {
return Promise.resolve()
.then(() => this.pipelineProvider.reset())
.then(() => this.authService.clearIdentity())
.then(() => this.router.navigate("/", { replace: true, trigger: false }))
.then(() => this.router.reset())
.then(() => this.aurelia.setRoot(PLATFORM.moduleName('public/public/public')));
}
...and no errors.