VueJSオンクリックイベントが機能しない

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

：、代わりにvmのVueのインスタンスを参照するためにthisを使用するより良い練習だろうと述べaxios.post('/foobar', this.data);

Answer 2

I'm not seeing anything broken with your code.

。しかし、dataオブジェクトを取得するには、Vueインスタンスの_dataプロパティを参照する必要があります（はundefinedになります）。

dataのオブジェクトはthis._dataで参照してください。コードの匂いです。 Vueインスタンスのデータプロパティは、直接thisから直接アクセスするためのものです。オブジェクト全体にアクセスすると、そのパラダイムが破壊されます。

あなたは（たとえばpostData）そのためのデータプロパティを作成し、あなたのポストの要求に{ someData: 'fooBar' }を提出しようとしている場合とthis.postDataを経由してそれを参照：

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

---

​​とあなたのテンプレートで結構です。