I have a very weird issue. I might be doing something very silly here but not aware of it.
I am using vue.js 1. I have a component which is a bootstrap modal that emits 4 custom events. For each of these, I have a listener registered on the parent. The very strange issue is, whenever i am registering the 4th listener, the event that this 4th listener is registered for is not emitting!
// on parent component template...
<fbu-create-maker-commission-modal
v-ref:new-commission-modal
modal-id="addSpCommissionModal"
:show-modal="showCreationModal"
v-on:hiding-modal="onHidingModal"
v-on:sp-commission-created="onCreatingNewSpCommission"
v-on:sp-commission-updated="onUpdatingSpecialCommission"
v-on:sp-commission-remove="onDeletingSpecialCommission"
:modal-template-data="templateData"
:mode="modalLaunchMode"
:object-to-edit="toEditObject"
></fbu-create-maker-commission-modal>
// child component code where the events are emitted from
editCommission() {
let config = Object.assign({}, this.modalTemplateData.httpConfig.updateSpecialCommission, { body: this.form.formData })
this.$http(config).then(response => {
console.log(response);
if(this.isVueResourceResponseValid(response)) {
this.$emit('sp-commission-updated', response.body.data.updatedCommission);
this.handleModalClose();
}
}).catch(errorResponse => {
console.log(errorResponse);
if(errorResponse.status == 422) {
for(errorKey in errorResponse.body) {
this.$set(`form.errors.${errorKey}`, errorResponse.body[errorKey]);
}
}
});
},
deleteCommission() {
let config = Object.assign({}, this.modalTemplateData.httpConfig.deleteSpecialCommission, { body: this.form.formData })
// console.log(config);
this.$http(config).then(response => {
// console.log(response);
if(this.isVueResourceResponseValid(response)) {
console.log('here');
this.$emit('sp-commission-remove', response.body.data.deletedSpecialCommission);
this.handleModalClose();
}
}).catch(errorResponse => {
});
},
createCommission() {
let config = Object.assign({}, this.modalTemplateData.httpConfig.createSpecialCommission, { body: this.form.formData })
this.$http(config).then(response => {
if(this.isVueResourceResponseValid(response)) {
this.$emit('sp-commission-created', response.body.data.newCommission);
this.handleModalClose();
}
}).catch(errorResponse => {
if(errorResponse.status == 422) {
for(errorKey in errorResponse.body) {
this.$set(`form.errors.${errorKey}`, errorResponse.body[errorKey]);
}
}
});
},
It's the sp-commission-remove event that is not being emitted if i register a listner for this on the parent, like this - v-on:sp-commission-remove="onDeletingSpecialCommission"
if i remove this listener, or even change any character of the custome event name, event emitts fine!!
Are there any limit on how many listeners/events can be emitted in Vue1?
It's driving me nuts. Can someone guide me to the right direction pls?
Related
I use web worker with vuejs to do some complicated calculations. I have two ways to terminate workers.
In beforeDestroy lifestyle
export default {
beforeDestroy() {
this.worker && this.worker.terminate()
},
watch: {
data(data) {
if (!this.worker) {
this.worker = new Worker('worker_url')
this.worker.addEventListener('message', () => {
// do something
})
}
this.worker.postMessage(data)
}
}
}
After receiving message
export default {
watch: {
data(data) {
const worker = new Worker('url')
worker.addEventListener('message', () => {
// do something
worker.terminate()
})
worker.postMessage(data)
}
}
}
And, in this example, worker creates a thread and keep until terminate method being called.
I wanna know which method is better and why.
Thanks.
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);
});
}
I have a Vue.js application using the Pusher Chatkit.
I have a problem I haven't been able to find an answer for some time now.
Whenever I re-visit a view/component the Chatkit onNewMessage() hook is triggered multiple times. It depends on the times I re-visit the page.
Page refresh or first-time load resolves the issue until next re-visit.
It must be that I am creating multiple listeners each time I visit the view, but I don't get what these listeners are.
Pusher states that room subscriptions "override" the old ones when done twice.
Here is my chat.vue component
import chatConnection from '../chatkit.js'
created(){
let chatManagerConnectPromise = chatConnection(this, uid)
Promise.all([..., chatManagerConnectPromise, ...])
.then(results => {
// ...
this.initiateNewChatState(results[1])
// ...
})
.catch(error =>{
});
},
methods: {
initiateNewChatState(currentUser){
this.subscribeToAllUserRooms(currentUser)
},
subscribeToAllUserRooms(currentUser){
for(let room of currentUser.rooms){
this.subscribeToRoom(currentUser, room.id)
}
},
subscribeToRoom(currentUser, roomId){
currentUser.subscribeToRoom({
roomId: roomId,
hooks: {
onNewMessage: message => {
console.log("CHAT | onNewMessage | new: ", message.text)
}
},
messageLimit: 10
})
.catch(error => {
this.notifyError("Uh oh", "Something is not right")
});
}
}
And here is my chatkit.js content:
import { ChatManager, TokenProvider } from '#pusher/chatkit'
export const chatConnection = ({ state, actions }, uid) =>{
return new ChatManager({
instanceLocator: "##:###:###:####:####",
userId: uid,
tokenProvider: new TokenProvider({url: 'https://...' })
})
.connect({
onAddedToRoom: room => {
// some action taken
},
onRemovedFromRoom: room => {
// some action taken
},
onRoomDeleted: room => {
// some action taken
}
})
.then(user => {
return user
})
.catch(error => console.log('CHATKIT | Error on connection', error))
}
Again, the problem is that the onNewMessage() is triggered once the first time after the page refresh/first load, but then increases by one with each new page visit (back and forth navigation).
I am creating some listeners with each visit but it cannot be the ChatManager not the User.subscribeToRoom!?
Thanks for any pointers.
Per documentation here
If page A pushes page B, it can send a function as a prop or data that modifies page A’s context. This way, whenever we want to send anything to page A from page B, the latter just needs to call the function and pass some arguments:
// Page A
this.$emit('push-page', {
extends: pageB,
onsNavigatorProps: {
passDataBack(data) {
this.dataFromPageB = data;
}
}
});
I am following this idea. Doing something similar with this.$store.commit
I want to push AddItemPage and get the returned value copied to this.items
//Parent.vue
pushAddItemPage() {
this.$store.commit('navigator/push', {
extends: AddItemPage,
data() {
return {
toolbarInfo: {
backLabel: this.$t('Page'),
title: this.$t('Add Item')
}
}
},
onsNavigatorProps: {
passDataBack(data) {
this.items = data.splice() //***this*** is undefined here
}
}
})
},
//AddItemPage.vue
...
submitChanges()
{
this.$attrs.passDataBack(this, ['abc', 'xyz']) // passDataBack() is called, no issues.
},
...
Only problem is this is not available inside callback function.
So i can't do this.items = data.splice()
current context is available with arrow operator.
Correct version:
onsNavigatorProps: {
passDataBack: (data) => {
this.items = data.splice()
}
}
I am passing params from my API to vue-head but every time I do that it send me undefined in the head this is the code:
export default {
data: () => ({
errors: [],
programs: [],
}),
methods: {
getProgram() {
this.api.http.get(`videos/program/${this.programSlug}`)
.then(response => {
this.programs = response.data
})
.catch(error => {
this.errors = error
});
}
},
head: {
title: function() {
return {
inner: this.programs.name,
separator: '|',
complement: 'Canal 10'
};
}
}
}
any idea what I am doing wrong with my code??
First verify you are fetching the information correctly. Use console log and go to network tab and verify you are fetching the data correct, you might have to comment out vue-head. But what I think is that the problem might be due to vue-head rendering before the api call finishes then no data is being passed.
If you are using vue-router this can be easily solved with beforeRouteEnter() hook. But if not! apparently vue-head has an event that you can emit to update the component after render.
I haven't tried this but it should work. you can add the function below to your methods and call it after the promise is resolved i.e in the then closure.
methods: {
getProgram() {
this.api.http.get(`videos/program/${this.programSlug}`)
.then(response => {
this.programs = response.data
this.$emit('updateHead')
})
.catch(error => {
this.errors = error
});
}
}