Passing Arguments in Native Script Vue Tap Event Tutorial

Passing arguments in button click event are the most commonly needed functionality in many mobile applications. In case of applications such as quiz, tic tac toe or anything which has an array of buttons /elements handling the event for all of them at once might seem like a difficult task. The purpose of this tutorial is to show you how can we implement handling of events and passing arguments on button click identifying each sender. Let’s start.

Here’s the UI for a tictactoe game’s button grid. we have used a grid layout to align buttons in a 3×3 array. Here we have to handle clicks of all 9 buttons using just a single function onClick().

 <GridLayout
    rows="80,80,80"
    columns="80,80,80"
    horizontalAlignment="center"
    verticalAlignment="center"
    ref="btnGrid"
  >
    <Button id="00" ref="btn0" @tap="onClick($event)" row="0" col="0" :text="btnText['00']"></Button>
    <Button id="01" @tap="onClick()" row="0" col="1" :text="btnText['01']"></Button>
    <Button id="02" @tap="onClick()" row="0" col="2" :text="btnText['02']"></Button>
    <Button id="10" @tap="onClick()" row="1" col="0" :text="btnText['10']"></Button>
    <Button id="11" @tap="onClick()" row="1" col="1" :text="btnText['11']"></Button>
    <Button id="12" @tap="onClick()" row="1" col="2" :text="btnText['12']"></Button>
    <Button id="20" @tap="onClick()" row="2" col="0" :text="btnText['20']"></Button>
    <Button id="21" @tap="onClick()" row="2" col="1" :text="btnText['21']"></Button>
    <Button id="22" @tap="onClick()" row="2" col="2" :text="btnText['22']"></Button>
  </GridLayout>

To handle the tap event we should create an onClick function in our methods as below.

onClick(args) {
       if (!args.object) return;
       const sender=args.object;
       let id=sender.id;
      let text=sender.text;
 alert(id);
 //to change the props
 args.object.text="CLICKED";
 args.object.class="selected";
 ///…
}

Here sender is the button which has thrown the event. if we hit the first button it will show the dialog with value 00 as it’s the id of the first button.
Hope you’ve got a clear idea about event handling and passing sender props in native script tap event. Thank You.