Trigger Events With or Without Argument

Trigger Events With or Without Argument

HTML

<div id="app">
  <button v-on:click="counter+=1">Click Me!! {{counter}}</button>
  <button v-on:click="ClickHello">Click Me!!</button>
  <button v-on:dblclick="DBLClick">Double Click Me!!</button>
  <button v-on:mouseover="MouseOverMe">Mouse Over Me!!</button>
  <h1 id="result">
    {{changeText}}
  </h1>
  <hr>
  <h1 id="inputText">{{changedData}}</h1>
  <input type="text" v-model="data">
  <button v-on:mouseover.native="getData('New Data Point is')">Change Above!!!</button>
</div>

JavaScript

var vew = new Vue({
  el: '#app',
  data: {
    counter: 0,
    changeText: 'This is the Result of Click',
    data:'',
    changedData:'This is where the input Prints itself'
  },
  methods: {
    ClickHello: function() {
      this.changeText = "You Clicked The button";
    },
    DBLClick: function() {
      this.changeText = "You Double Clicked The button";
    },
    MouseOverMe: function() {
      this.changeText = "You Are Hovering the button";
    },
    getData:function(data){
    	this.changedData = data+this.data;
    }
  }
});