Vue - Method Event Handlers

0 votes
200 views
added Oct 25, 2019 in Vue by LC Marshal Captain (25,790 points)

 Keeping value of v-on attribute isn’t always feasible especially in the event, where event handlers gets more complex. That's when v-on hang onto method. 

<div id="hallo">
  <!-- `hallo` is the name of a method defined below -->
  <button v-on:click="halloclick">Hallo</button>
</div>

<script>
var hallo = new Vue({
  el: '#hallo',
  data: {
    name: 'Hallo LC'
  },
  // methods to be defined under `methods` object
  methods: {
    halloclick: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JS as well
hallo.halloclick() // => 'Hallo LC'
</script>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...