vue-resettable

Vue.js component to provide resettable VM.

Install

npm install vue-resettable

How to Use

Mixin to your component, then you can use below methods in your component.

Methods

• reset() - reset $data to default.
• update() - set current value as default(and you can reset $data to that).
• getBase([propertyName]) - get default $data.[propertyName]. this will work with computed properties also.
• changed([propertyName]) - check $data.[propertyName] has changed from default

Sample Code

<div id="app">
    <color-component color="#aabbcc">
    <div>
        <p style="background-color:{{getBase('color')}}">baseData:{{getBase('color')}}</p>
        <p style="background-color:{{color}}">currentData:{{color}}</p>
        <p><input type=text v-model="color"></p>
        changed: {{changed("color")}} <br>
        <input type=button value="Reset" v-on="click: reset">
        <input type=button value="Update"v-on="click: update()">
    </div>
    </color-component>
</div>


<script>
    var resettable = require('vue-resettable');
    var colorComponent = Vue.extend({
        props: ["color"],
        mixins: [resettable]
    });

    var app = new Vue({
        el: '#app',
        components:{
            'color-component': colorComponent
        }
    })
</script>

See some working samples at https://github.com/satetsu888/vue-resettable-sample