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點擊事件不起作用

回答

相關問題