Question

我只是想做简单的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（）”

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

Answer 1

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

Vue.js-@click不触发方法

1 个答案: