Question

我无法让它发挥作用。 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);
        }
    }
});

任何帮助将不胜感激！

Answer 1

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

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

Answer 2

I'm not seeing anything broken with your code.

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

但是，当您可以通过data引用您的this._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"模板很好。

Answer 3

古老的问题，但是如果有人被卡住，这对我有用吗

button click事件实际上试图提交表单，因为它包含在form元素中。因此，为了使其调用该方法，我不得不做@click.prevent="myMethod()"

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

VueJS点击事件无法正常工作

3 个答案: