JSFiddle - React, Tailwind, and code Playground

by Craig Humphreys

HTML

<script src="https://unpkg.com/vue@2.1.8/dist/vue.js"></script>
<script src="https://unpkg.com/vue-model-on@1.1.0/dist/vue-model-on.js"></script>
<div id="app">
  <h2>
Vue-model-on for updating on blur
</h2>
  <input v-model-on:blur="myVar" /> Input: {{myVar}}
  <div class="button">
    <button @click="myVar = 'bar'">Make Bar</button>
  </div>
</div>

CSS

body{
font-family: sans-serif;  
}

.button{
  margin-top: 10px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    myVar: 'foo' // declare model data var
  }
});