vue-form-tools example

by Adam Carheden

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.rawgit.com/adamcarheden/vue-form-tools/master/vue-form-tools.js"></script>
<div>
  <h1><a href='https://github.com/adamcarheden/vue-form-tools' target='_blank'>VUE Form Tools</a> example</h1>
  <div id="vft">
    <table style='margin-left: auto; margin-right: auto'>
      <tr>
        <th>&nbsp;</th>
        <th>Form</th>
        <th>Object value</th>
      </tr>
      <tr>
        <td class='lbl'>Hey, wake up!</td>
        <td>
          <vft-managed-input v-model="obj.noz" :validate=validate />
          <div>(Try to type the letter 'z')</div>
        </td>
        <td>{{obj.noz}}</td>
        <td>
          <button v-on:click='obj.noz = "abc"'>&larr; Set</button>
        </td>
      </tr>

      <tr>
        <td class='lbl'>Integer</td>
        <td>
          <vft-integer-input v-model="obj.whole"></vft-integer-input>
        </td>
        <td>{{obj.whole}}</td>
        <td>
          <button v-on:click='obj.whole = 12345'>&larr; Set</button>
        </td>
      </tr>
<tr>
<td class='lbl'>Float</td>
			<td><vft-float-input v-model="obj.decimal"></vft-float-input></td>
			<td>{{obj.decimal}}</td>
			<td><button v-on:click='obj.decimal = 3.1415927'>&larr; Set</button></td>
		</tr>
		<tr>
			<td class='lbl'>Dollar</td>
			<td><vft-dollar-input v-model="obj.money"></vft-dollar-input></td>
			<td>{{obj.money}}</td>
			<td><button v-on:click='obj.money = 1000000'>&larr; Set</button></td>
		</tr>
    </table>
  </div>
  (At present formatting is broken because the rawgit cdn hasn't pulled the latest build from github yet. It may be fixed by the time you read this.)

</div>

CSS

h1 { text-align: center; }

JavaScript

var vft = new Vue({
  el: '#vft',
  data() {
    return {
      validate: function(val) {
        if (val.match(/z/i)) throw new Error(`'z' is not allowed`)
        return true
      },
      obj: {
        noz: 'wxy',
        whole: 10,
        decimal: 0.5,
        money: 50,
      }
    }
  },
  components: {
    vftManagedInput: window['vue-form-tools'].vftManagedInput,
    vftIntegerInput: window['vue-form-tools'].vftIntegerInput,
    vftFloatInput: window['vue-form-tools'].vftFloatInput,
    vftDollarInput: window['vue-form-tools'].vftDollarInput,
  }
})