JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="https://cdn.rawgit.com/yyx990803/vue/0.11.0-rc2/dist/vue.js"></script>
<input type="text" v-temperature="test" />{{test}}

<button v-on="click: reset">reset to default</button>

<div class="error" v-show="error">{{error}}</div>

CSS

.error {
    color: red;
}

JavaScript

Vue.directive('temperature', {
    twoWay: true,

    backup: '',

    bind: function () {
        var self = this;

        this.el.addEventListener('input', function () {
            var value = self.el.value;

            if (!value.match(/^[+-]?([0-9]{1,2})?$/)) {
                self.el.value = self.backup;
            } else {

                if (!self.el.value) {
                    self.vm.$emit('error', 'empty value');
                } else {
                    self.vm.$emit('clear_errors');
                }

                self.backup = self.el.value;
                self.set(self.el.value, true);
            }

        });
    },

    update: function (value) {
        this.backup = value;
        this.el.value = value == null ? '' : value.toString()
    }
});

new Vue({
    el: 'body',

    dataBackup: {},

    data: {
        test: '+5',
        error: false
    },

    events: {
        'hook:created': function () {
            this.dataBackup = JSON.stringify(this.$data);
        },
            'error': function (error) {
            this.error = error;
        },
            'clear_errors': function () {
            this.error = false;
        }
    },

    methods: {
        reset: function () {
            this.$set('$data', JSON.parse(this.dataBackup));
        }
    }
});