Event and Method arguments vue js 3

 

Event and method arguments:

===================================================================================

//app.js er code below

var app = Vue.createApp({

    data(){

        return{ 

            count: 0

        };  

        

    },

        methods: {

            increse(amount){

                this.count = this.count + amount;

            },

            decrease(amount){

                this.count = this.count - amount;

            }         

            

        }

    

})

app.mount('#app');

....

//index.html er code

    <div id="app">

     

      <h2>count:  {{count}}</h2>

      

      

      <button @click="increse(1)">increment 1</button>

      <button @click="decrease(1)">decrement 1</button><br>

      <button @click="increse(2)">increment 2</button>

      <button @click="decrease(2)">decrement 2</button>

    </div>

.................

//output: increment and decrement 1 and 2 korei hobe.

..................

//index.html er code

//test er sathe parenthesis na use koreo event console e dekha jay.

<button @click="test">test</button>  

//app.js er code below

  test(ev){

                console.log('test');

                console.log(ev);

            }

output: Mouseevent dekha jabe console e

.........................

//with parenthesis use

//index.html er code

<button @click="test($event)">test</button>

//app.js er code below

 test(ev){

                console.log('test');

                console.log(ev);

            }

            

output: Mouseevent dekha jabe console e

...................

//with parenthesis use

//index.html er code

    <button @click="increse($event, 1)">increment 1</button>

//app.js er code below

   increse(evt, amount){

                this.count = this.count + amount;

                console.log(evt);

            },

//increse button e click korle Mouseevent dekha jabe console e

.................