submit() {
if(this.submitvalidtion()) {
this.loading = true;
axios.post('/api/vaccine/create_baby_info', this.form).then(res => res.data).then(res => {
//console.log(JSON.stringify(res));
this.$bvToast.toast(res.data.message,{ variant:'success', noCloseButton: true,solid:true})
this.loading = false;
})
.catch((error) => {
let error_msg = error.res.data.message;
this.$bvToast.toast(error_msg,{ variant:'danger', noCloseButton: true, solid:true})
this.loading = false;
});
}
},
Hi i am new to vue js, and can someone help me with this.
After i clicked the submit button , the 'toast' function not showing up
Call function inside methods in this way:
submit: function () {
// condition code add here
}
For calling submit function call in this way
vm.submit()
Related
I've built a modal using Vuex and Vuetify's v-bottom-sheet. Basically how it works is when the state of sendMessageModal is true it is picked up in a computed property and shows the modal and vice versa for false:
//Vuex mutation
toggleSendMessageModal(state) {
return state.sendMessageModal = ! state.sendMessageModal;
}
//Vuex Action
closeSendMessageModal(context) {
return new Promise((resolve, reject)=>{
context.commit('toggleSendMessageModal');
setTimeout(1000);
const error = false;
if(!error){
resolve();
} else {
reject();
}
});
}
//SendMessageModal Component
computed: {
showSendMessageModal() {
return this.$store.state.sendMessageModal;
}
},
methods: {
closeSendMessageModal(){
this.$store.dispatch('closeSendMessageModal').then(function() {
this.clearValues()
}.bind(this));
},
clearValues: function(){
this.subject = '';
this.body = '';
this.slide = 1;
},
}
What I'm trying to do is clearValues() after the modal is closed. The only way I can currently do this is if I set a time out like such:
//SendMessageModal Component
closeSendMessageModal(){
this.$store.dispatch('closeSendMessageModal').then(function() {
setTimeout(function(){ this.clearValues(); }.bind(this), 1000);
}.bind(this));
},
But I'd like to wait for the modal to close then clearValues(). The problem is if someone wants to reopen the modal immediately again.
Note there is a transition on the modal, but I think what's going on is the toggleSendMessageModal isn't allowing for the modal to close then clear values.
Gif of CSS transition from Vuetify. And here is my full component code.
Edit 2
I don't know if this is a vuetify problem.
I set the time out on the closeSendMessageModal action:
closeSendMessageModal(context) {
return new Promise((resolve, reject)=>{
//context.commit('toggleSendMessageModal');
setTimeout(function(){ context.commit('toggleSendMessageModal'); }.bind(this), 1000);
const error = false;
if(!error){
resolve();
} else {
reject();
}
});
}
The this.clearValues(); method is still hitting before the closeSendMessageModal() action has been resolved.
This is more of a question than an answer but could be both. Cant you use nextTick for this? e.g.:
methods: {
closeSendMessageModal(){
this.$store.dispatch('closeSendMessageModal');
this.$nextTick(() => this.clearValues());
},
clearValues: function(){
this.subject = '';
this.body = '';
this.slide = 1;
},
}
I am trying to mock a setInterval inside my created hook but no matter what I try
the function is never called. What I have done so far is using jest.useFakeTimers and inside
each test I would use jest.advanceTimersByTime(8000) to check if my api is being called.
I would appreciate any opinions/help. thanks
my vue file
created() {
setInterval(() => this.checkStatus(), 8000)
},
methods: {
async checkStatus() {
let activated = false
if (!this.isLoading) {
this.isLoading = true
let res = await this.$UserApi.getUserActivateStatus(this.accountId)
this.isLoading = false
if (res.success) {
activated = res.activated
}
if (activated) {
console.log("activated")
} else {
console.log("error")
}
}
}
}
my test file
import { shallowMount, config } from "#vue/test-utils"
import Step4 from "../../../login/smart_station/step4"
describe("Step4", () => {
let wrapper
const $route = {
query: {
account_id: "99"
}
}
const mockGetUserActivateStatus = jest.fn(() =>
Promise.resolve({ success: true, activated: true })
)
beforeEach(() => {
wrapper = shallowMount(Step4, {
mocks: {
$UserApi: {
getUserActivateStatus: mockGetUserActivateStatus
}
}
})
jest.useFakeTimers()
})
it("activates status every 8secs", async () => {
jest.advanceTimersByTime(9000)
expect(mockGetUserActivateStatus).toHaveBeenCalled()
})
})
Jest's Timer Mocks replace the native timer functions like setInterval with their own versions that can be controlled.
Your problem is that you are telling Jest to replace these functions after your component is created and mounted. Since you're using setInterval within your component's created hook, this will still be using the real version.
Move the jest.useFakeTimers() to the top of the beforeEach setup function
beforeEach(() => {
jest.useFakeTimers()
wrapper = shallowMount(Step4, {
mocks: {
$UserApi: {
getUserActivateStatus: mockGetUserActivateStatus
}
}
})
})
I am trying to debounce a method within a Vuex action that requires an external API.
// Vuex action:
async load ({ state, commit, dispatch }) {
const params = {
period: state.option.period,
from: state.option.from,
to: state.option.to
}
commit('SET_EVENTS_LOADING', true)
const res = loadDebounced.bind(this)
const data = await res(params)
console.log(data)
commit('SET_EVENTS', data.collection)
commit('SET_PAGINATION', data.pagination)
commit('SET_EVENTS_LOADING', false)
return data
}
// Debounced method
const loadDebounced = () => {
return debounce(async (params) => {
const { data } = await this.$axios.get('events', { params })
return data
}, 3000)
}
The output of the log is:
[Function] {
cancel: [Function]
}
It is not actually executing the debounced function, but returning to me another function.
I would like to present a custom debounce method which you can use in your vuex store as
let ongoingRequest = undefined;
const loadDebounced = () => {
clearTimeout(ongoingRequest);
ongoingRequest = setTimeout(_ => {
axios.get(<<your URL>>).then(({ data }) => data);
}, 3000);
}
This method first ensures to cancel any ongoing setTimeout in the pipeline and then executes it again.
This can be seen in action HERE
Data part
data () {
return {
containsAd: true
}
},
Method that manipulates the data member containsAd
updated () {
let _this = this
window.googletag.pubads().addEventListener('slotRenderEnded', function (event) {
if (event.slot.getSlotElementId() === 'div-gpt-ad-nativead1') {
_this.containsAd = !event.isEmpty // this is false
console.log('Ad Exists? ', _this.containsAd)
}
})
},
Just to check if the value has changed or not.
check () {
let _this = this
setTimeout(function () {
console.log('Current Value', _this.containsAd)
}, 5000)
}
Resulting Output
I think doing the event listener in the mounted hook will sort your issue.
data() {
return {
containsAd: true
};
},
mounted() {
window.googletag.pubads().addEventListener('slotRenderEnded', event => {
if (event.slot.getSlotElementId() === 'div-gpt-ad-nativead1') {
this.containsAd = ! event.isEmpty // this is false
console.log('Ad Exists?', this.containsAd);
}
});
}
Also using es6 shorthand function will avoid you having to set _this.
I have in one component this:
openNewWindow() {
let child = new BrowserWindow({
modal: true,
show: false,
});
child.loadURL('http://localhost:9080/#/call/' + this.chatEntityId + '?devices=' + JSON.stringify(data));
child.on('close', function () { child = null; });
child.once('ready-to-show', () => {
child.show();
});
child.webContents.on('did-finish-load', () => {
console.log("done loading");
ipcRenderer.send('chanel', "data");
});
}
And then in child window component:
mounted() {
ipc.on('chanel', (event, message) => {
console.log(message);
console.log(event);
});
}
I tried that .on in created() and beforeCreate() and with this.$nextTick(), withsetTimeout` but nothing works.
I don't want to send some string data but object but as you can see not event simple string "data" works. I am out of ideas.
I can see that this only works in parent component for component where that emit came from if i do this:
send
listen in main process
send back to event.sender
So, question is how to pass any form of data from one window to another?
Ok, after long night, morning after solution.
In some vuejs componenet some action on button click for example
ipcRenderer.send('chanel', someData);
In main process
ipcMain.on('chanel', (event, arg) => {
let child = new BrowserWindow()
// other stuff here
child.loadURL(arg.url)
child.on('show', () => {
console.log("done loading");
child.webContents.send('data', arg);
});
})
In vuejs component for other route arg.url
mounted() {
ipc.on('chanel', (event, message) => {
console.log(message);
console.log(event);
});
}