Vue – $event

Posted by On 1月 07, 2018 0 Comment

This is sample to use $event
$event variable is event object of javascript.

In this samples, show 2 ways to handle input using event handle or model.

Example

v-on

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
     <div id="example">
       <p v-show="!isValid">
        Please input name
      </p>
      <p>
        Input : <input type="text" v-on:input="updateName($event)">
        Change : <input type="text" v-on:change="updateName($event)">
      </p>
      <p v-show="isValid">
        <button v-on:click="sendData">Submit</button>
      </p>
     </div>
     <script>
     var vm = new Vue({
      el: '#example',
      data: {
        name: '',
      },
      computed: {
        isValid: function() {
          return this.name.length > 0;
        }
      },
      methods: {
        updateName: function(event) {
          this.name = event.target.value;
        },
        sendData: function() {
          alert(this.name);
        }
      }
    });
     </script>
  </body>
</html>

model

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="example">
      <p>Name {{ name }}</p>
      <p v-show="!isValid">
        Please input name
      </p>
      <p>
        Input : <input type="text" v-model="name">
      </p>
      <p v-show="isValid">
        <button v-on:click="sendData">Submit</button>
      </p>
    </div>
    <script>
    var vm = new Vue({
      el: '#example',
      data: {
        name: '',
      },
      computed: {
        isValid: function() {
          return this.name.length > 0;
        }
      },
      methods: {
        sendData: function() {
          alert(this.name);
        }
      }
    });
    </script>
  </body>
</html>

TOPICS