VueJS点击事件不起作用答案

【问题标题】：VueJS on-click event not workingVueJS点击事件不起作用
【发布时间】：2018-03-06 14:27:58
【问题描述】：

我无法让它工作。 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>

Vue 实例：

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

任何帮助将不胜感激！

【问题讨论】：

你的v-on:click 被调用就好了。看看这个小提琴，例如fiddle.jshell.net/v1qpt8d8/1
您需要在postEventData 方法中引用this，而不是vm
谢谢，但即使我复制粘贴 jsfiddle，它也无法正常工作。

标签： javascript vue.js vuejs2

【解决方案1】：

老问题，但如果其他人被卡住，这对我有用

按钮单击事件实际上是在尝试提交表单，因为它包含在表单元素中。所以为了让它调用我必须做的方法@click.prevent="myMethod()"

.prevent 是关键。它充当event.preventDefault()

【讨论】：

【解决方案2】：

I'm not seeing anything broken with your code.

也就是说，使用this 来引用Vue 实例而不是vm 会更好。但是，您仍然需要引用 Vue 实例的 _data 属性来获取 data 对象（this.data 将是 undefined）。

但是，虽然您可以通过this._data 引用您的data 对象，但这是一种代码异味。您的 Vue 实例的数据属性可以直接从this 单独访问。访问整个对象打破了这种范式。

如果您尝试在您的帖子请求中提交{ 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" 的模板很好。

【讨论】：

感谢您提供详细信息！我会在我的代码上尝试你的建议，稍后在 cmets 中分享输出。

【解决方案3】：

更改此axios.post('/foobar', vm._data);

对此：axios.post('/foobar', this.data);

【讨论】：

我尝试了常规的onclick="vm.postEventData()"，它工作正常。但是，当我将 vm._data 更改为 this.data 时，它也无法正常工作。我不明白为什么。