Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>How to Call a Vue.js Component Method From Outside The</title> </head> <body> <div id="app"> <my-component ref="childref"></my-component> <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button> </div> <template id="my-template"> <div style="border: 1px solid; padding: 2px;" ref="childref"> <p>A counter: {{ count }}</p> <button @click="increaseCount">Internal Button</button> </div> </template> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script> new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 0, }; }, methods: { increaseCount: function() { this.count++; } } }, } }); </script> </body> </html>