Vue.js 2 Web Development Projects

Button and click events with v-on

Now, we will need a button to call this method. Create a new button element inside a div element with the toolbar class:

<aside class="side-bar">
  <!-- Toolbar -->
  <div class="toolbar">
    <!-- Add note button -->
    <button><i class="material-icons">add</i> Add note</button>
  </div>
</aside>

To call the addNote method when the user clicks on the button, we will need a new directive--v-on. The value will be the function called when the event is caught, but it also expects an argument to know which event to listen to. However, how do we pass the argument to the directive, you might ask? It's quite simple! Add a : character after the directive name, followed by the argument. Here is an example:

<button v-directive:argument="value"> ...