How to Use Vue Methods | vue created method
AVuemethodisafunctionassociatedwitheveryVueinstanceandcreatedwiththemethodsproperty.Wecanusethemtoperformcertainactionswhentheuserinteractswithanelement,likeclickingonabutton,orenteringdataintoatextinput.ReadontofindoutmoreabouthowtodefineanduseVuemethods.CreatingaVueMethodTocreateamethod,weassignanobjecttothemethodpropertyoftheVueinstance.Eachkeyoftheobjectpassedcorrespondstoamethodname.
A Vue method is a function associated with every Vue instance and created with the methods property. We can use them to perform certain actions when the user interacts with an element, like clicking on a button, or entering data into a text input. Read on to find out more about how to define and use Vue methods.
Creating a Vue MethodTo create a method, we assign an object to the method property of the Vue instance. Each key of the object passed corresponds to a method name.
<script> export default { methods: () => ({ handleClick: () => { alert(You clicked the button.); }, handleChange: () => { console.log(Text input changed); }, }), }; </script>This is JavaScript, so we can use the shorter method definition syntax introduced in ES 2015:
<script> export default { methods: { handleClick() { alert(You clicked the button.); }, handleInput() { console.log(Text input changed); }, }, }...