VueJS On-Click-Ereignis funktioniert nicht

Question

Ich konnte es nicht schaffen, es zu arbeiten. v-on: click-Ereignis ruft die Methode in Vue-Instanz nicht auf. Hier ist der Codes:

<div id="app"> 
    <button class="btn btn-success" v-on:click="postEventData"> 
     <i class="icon wb-share"></i> Publish 
    </button> 
</div> 

Vue Beispiel:

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

Jede mögliche Hilfe würde geschätzt!

Answer 1

Ändern Sie diese axios.post('/foobar', vm._data);

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

Answer 2

I'm not seeing anything broken with your code.

Das heißt, es wäre besser Praxis this zu verwenden, um die Vue-Instanz statt vm zu verweisen. Sie müssen jedoch immer noch auf die _data-Eigenschaft Ihrer Vue-Instanz verweisen, um das Objekt data zu erhalten (this.data wird undefined sein).

Doch während Sie können Referenz Ihre data Objekt über this._data, es ist ein Code Geruch ist. Die Dateneigenschaften Ihrer Vue-Instanz sind einzeln direkt von this aus zugänglich. Der Zugriff auf das gesamte Objekt bricht dieses Paradigma.

Wenn Sie versuchen, { someData: 'fooBar' } in Ihrem Post Antrag zu stellen, eine Dateneigenschaft für das machen (sagen wir postData) und verweisen Sie über this.postData:

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

---

Ihre Vorlage mit v-on:click="postEventData" in Ordnung ist.