VueJS点击事件不起作用

我无法使其工作。 v-on：click事件不会调用Vue实例上的方法。这里是代码：VueJS点击事件不起作用

<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); 
     } 
    } 
});

任何帮助，将不胜感激！

来源

2017-09-25 lostbyte

你的'v-on：click'被调用得很好。看看这个小提琴的例子https://fiddle.jshell.net/v1qpt8d8/1/ –

你需要在你的'postEventData'方法中引用'this'，而不是'vm' – thanksd

谢谢，但即使我复制粘贴jsfiddle，它不管用。 – lostbyte

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

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

来源

2017-09-25 15:14:51 user3743266

我试着定期'onclick =“vm.postEventData（）”'它工作正常。但是，当我将'vm._data'改为'this.data'时，它不工作。我无法理解为什么。 – lostbyte

I'm not seeing anything broken with your code.

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

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

如果你想通过this.postData在POST请求提交{ someData: 'fooBar' }，使数据属性，用于（比如postData），并引用它：

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

您与模板是好的。

来源

2017-09-25 17:26:52 thanksd

感谢您的详细信息！我会在我的代码上尝试您的建议，并在稍后的评论中分享输出。 – lostbyte

VueJS点击事件不起作用

回答

相关问题