Javascript VueJS on click事件不工作

我无法使它工作。v-on:click事件未调用Vue实例上的方法。代码如下：

<div id="app">
    <button class="btn btn-success" v-on:click="postEventData">
        <i class="icon wb-share"></i> Publish
    </button>
</div>

---

任何帮助都将不胜感激

更改此

axios.post（'/foobar'，vm.\u数据）

对此：
axios.post（'/foobar'，this.data）

也就是说，最好使用
this
来引用Vue实例，而不是
vm
。但是，您仍然需要引用Vue实例的
\u data
属性来获取
data
对象（
此.data
将是
未定义的
）

但是，虽然您可以通过
this.\u data
引用
数据
对象，但这是一种代码味道。您的Vue实例的数据属性意味着可以直接从
中访问。访问整个对象打破了这种模式

如果您试图在post请求中提交
{someData:'fooBar'}
，请为此创建一个数据属性（例如
postData
），并通过
this.postData
引用它：

 var vm = new Vue({
    el: '#app',
    data: {
        postData: { someData: 'fooBar' }
    },
    methods: {
        postEventData: function () {
            axios.post('/foobar', this.postData);
        }
    }
});


您的带有
v-on:click=“postEventData”
的模板很好
 这是一个老问题，但如果其他人陷入困境，这对我来说是有效的

按钮单击事件实际上是在尝试提交表单，因为表单包含在表单元素中。因此，为了让它调用方法，我必须执行
@click.prevent=“myMethod（）”

.prevent
是关键。它充当了
事件。preventDefault（）
您的
v-on:click
正被调用。例如，看看这个提琴，你需要在你的
postEventData
方法中引用
this
，而不是
vm
谢谢，但即使我复制粘贴JSFIDLE，它也不起作用。我试过常规的
onclick=“vm.postEventData（）”
，效果很好。但是，当我将
vm.\u data
更改为
this.data
时，它也不起作用。我不明白为什么。谢谢你提供的详细信息！我将尝试您对我的代码的建议，并在稍后的评论中分享输出。
 var vm = new Vue({
    el: '#app',
    data: {
        postData: { someData: 'fooBar' }
    },
    methods: {
        postEventData: function () {
            axios.post('/foobar', this.postData);
        }
    }
});