I am new to Vue. So I gotta tell ya, what I am doing here is working, but I am also get a dev tools error.
[Vue warn]: v-on with no argument expects an object value.
Now, I get WHY it is telling me this, but when I try to fix it in a couple of ways, I get a number of errors. What I am wondering is how would I resolve this properly. I also want to stress what the code is doing IS working as expected on the frontend. Just not proper Vue I would like to resolve
TEMPLATE
<div v-if="message.type === 'message'">
<chat-message v-on="playMessageNotificationSound()"
:message="message"/>
</div>
<div v-else-if="message.type === 'notification'">
<div v-show="this.$store.state.notifications.enterLeave === 'true'">
<chat-notification v-on="playNotificationSound()" :message="message" />
</div>
</div>
SCRIPT
methods: {
playMessageNotificationSound() {
if (this.$store.state.notifications.messagesound === 'true' ) {
var audio = new Audio('https://chat-cdn.levelupchat.com/chat-sounds/whisper.mp3');
audio.volume = 0.4;
audio.play();
}
},
playNotificationSound () {
if (this.$store.state.notifications.enterLeaveSound === 'true' ) {
var audio = new Audio('https://chat-cdn.levelupchat.com/chat-sounds/message.mp3');
audio.volume = 0.4;
audio.play();
}
},
v-on is a directive to listen to DOM events and run some JavaScript when they’re triggered. You can't use it empty instead need to bind an event handler . For example
<button v-on:click="say('hi')">Say hi</button>
where
methods: {
say: function (message) {
alert(message)
}
}
For more info : https://vuejs.org/v2/guide/events.html#Listening-to-Events
The v-on directive is intended for binding event listeners, but you're not actually trying to listen to any events, so you're misusing the v-on directive, leading to the warning you observed.
When Vue loads <chat-message v-on="playNotificationSound()">, it calls playNotificationSound(), expecting a return value to assign to v-on. Since playNotificationSound() is called when chat-message and chat-notification is rendered, it only appears to work as intended (the sound coincides with the chat message/notification).
However, there are no events to be handled here, so v-on should not be used. The call to playNotificationSound() should perhaps be moved into a watcher on message.type:
export default {
watch: {
'message.type'(messageType) {
if (messageType === 'message') {
this.playMessageNotificationSound()
} else if (messageType === 'notification' && this.$store.state.notifications.enterLeave === 'true') {
this.playNotificationSound()
}
}
}
}