v-on with no argument expects an object value-CodePudding

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();
    }
  },

CodePudding user response：

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

CodePudding user response：

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()
      }
    }
  }
}