Use vue 2.2.x custom models bootstrap-vue#134

Pooya Parsa · Pooya Parsa · commit fd3f85d0fe12 · 2017-03-15T22:19:19.000+03:30
diff --git a/components/form-checkbox.vue b/components/form-checkbox.vue
@@ -5,11 +5,10 @@
                 type="checkbox"
                 :id="id"
                 :name="name"
-                :value="_value"
+                :value="value"
                 :disabled="disabled"
-                @change="change($event.target.checked)"
-                :checked="localChecked"
-
+                :checked="checked===value"
+                @change="$emit('change',$event.target.checked?value:uncheckedValue)"
         >
         <span class="custom-control-indicator" v-if="custom"></span>
         <span :class="[custom?'custom-control-description':null]"><slot></slot></span>
@@ -22,11 +21,12 @@
     export default {
         data() {
             return {
-                localChecked: this.checked
-            };
+
+            }
         },
-        mounted() {
-            this.change(this.localChecked);
+        model: {
+            prop: 'checked',
+            event: 'change'
         },
         computed: {
             inputState() {
@@ -42,14 +42,16 @@
                 type: String,
                 default: null
             },
-            _value: {
+            value: {
                 default: true
             },
-            disabled: {
-                type: Boolean,
+            uncheckedValue: {
                 default: false
             },
             checked: {
+                default: true
+            },
+            disabled: {
                 type: Boolean,
                 default: false
             },
@@ -61,13 +63,6 @@
                 type: Boolean,
                 default: true
             }
-        },
-        methods: {
-            change(checked) {
-                this.localChecked = checked;
-                this.$emit('change', checked);
-                this.$emit('input', checked ? this._value : undefined);
-            }
         }
     };
 
diff --git a/docs/data/site.js b/docs/data/site.js
@@ -22,7 +22,7 @@ export default {
                 {title: 'Form Inputs'},
                 {title: 'Form Fieldset'},
                 {title: 'Form Radio'},
-                {title: 'Form Checkbox'},
+                {title: 'Form Checkbox', new: true},
                 {title: 'Form Select'},
                 {title: 'Modals', experimental: true},
                 {title: 'Nav'},
diff --git a/docs/pages/docs/components/form-checkbox.vue b/docs/pages/docs/components/form-checkbox.vue
@@ -5,23 +5,22 @@
         </template>
 
         <template slot="description">
-            This component uses a special <code>_value</code> Property to keep compatible with <code>v-model</code>
-            directive.
+
         </template>
 
         <template slot="demo">
 
-            <b-form-checkbox v-model="check1" _value="Option1" checked>
-                CheckBox Default
+            <b-form-checkbox v-model="state" value="accepted" unchecked-value="not_accepted">
+                I accept terms and use
             </b-form-checkbox>
 
-            <div>Value: {{check1}}</div>
+            <div>State: <strong>{{state}}</strong></div>
 
         </template>
 
         <template slot="usage">
-            &lt;b-form-checkbox v-model=&quot;check1&quot; _value=&quot;Option1&quot; checked&gt;
-            CheckBox Default
+            &lt;b-form-checkbox v-model=&quot;check1&quot; value=&quot;Option1&quot;
+            Tick me
             &lt;/b-form-checkbox&gt;
         </template>
 
@@ -54,7 +53,7 @@ export default {
                     }
                 ]
             },
-            check1: ''
+            state: 'please_accept'
         };
     }
 };
