vue.js - 没有参数的 v-on 需要一个对象值

Question

我是 Vue 新手。所以我得告诉你，我在这里所做的是有效的，但我也遇到了开发工具错误。

[Vue warn]: v-on with no argument expects an object value.

现在，我明白了为什么它会告诉我这个，但是当我尝试以多种方式修复它时，我遇到了很多错误。我想知道的是我将如何正确解决这个问题。我还想强调代码在前端所做的是按预期工作的。只是不合适的 Vue 我想解决

模板

<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>

脚本

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

Answer 1

v-on 是一个指令，用于监听 DOM 事件并在它们被触发时运行一些 JavaScript。您不能将它空着使用，而是需要绑定(bind)一个事件处理程序。例如

<button v-on:click="say('hi')">Say hi</button>

在哪里

  methods: {
    say: function (message) {
      alert(message)
    }
  }

更多信息:https://v2.vuejs.org/v2/guide/events.html#Listening-to-Events