Clickaway demo (vue@^2.1.0)

by Denis Karabaza

HTML

<script src="https://unpkg.com/vue@^2.1.0"></script>
<script src="https://unpkg.com/vue-clickaway@^2.1.0/dist/vue-clickaway.js"></script>

<div id="demo">
  <p v-on-clickaway="away" @click="click" :style="{ color: color }">{{ text }}</p>
</div>

<hr/>
<ul>
  <li>vue: <a href="https://unpkg.com/vue@^2.1">^2.1.0</a></li>
  <li>vue-clickaway: <a href="https://unpkg.com/vue-clickaway@^2.0.0/dist/vue-clickaway.js">^2.1.0</a></li>
</ul>

JavaScript

new Vue({
  el: '#demo',
  mixins: [VueClickaway.mixin],
  data: {
    text: 'Click somewhere.',
    color: 'black',
  },
  methods: {
    click: function() {
      this.text = 'You clicked on me!';
      this.color = 'green';
    },
    away: function() {
      this.text = 'You clicked away...';
      this.color = 'red';
    },
  },
});