时间戳

首页 > 解决方案 > Vuejs - @click 不触发方法

vuejs2 - Vuejs - @click 不触发方法

问题描述

我只是想做简单的 onclick 方法，但我不确定为什么这些方法没有被触发。
我的按钮：

<template>
    <div class="button">
          <a
            long
            class="cancel-button"
            @click="cancelOnClick"
          >Cancel</a>
          <a
            long
            class="ok-button"
            @click="okOnClick"
          >OK</a>
     </div>
</template>

我的方法：

export default {
  methods: {
      cancelOnClick(){  console.log('Cancel clicked')  }
      okOnClick()    {  console.log('OK     clicked')  }
  }
}

但是当我改变

@click="cancelOnClick"

至

:click="this.cancelOnClick()"

然后该功能将保持触发而无需单击它。我不确定发生了什么。有什么帮助建议吗？

标签： vuejs2onclick

解决方案

@click="cancelOnClick"正在工作中...

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/x-template" id="test-template">
    <div class="button">
          <a
            long
            class="cancel-button"
            @click="cancelOnClick"
          >Cancel</a>
          <a
            long
            class="ok-button"
            @click="okOnClick"
          >OK</a>
     </div>
</script>
<div id="app"></div>
<script>
var app = new Vue({
  el: '#app',
  template: '#test-template',
  methods: {
      cancelOnClick(){  console.log('Cancel clicked')  },
      okOnClick()    {  console.log('OK     clicked')  }
  }
})
</script>

推荐阅读