Browse Source

fix:修复checkboxgroup 无法实现双向数据绑定 issues #126

richard1015 6 years ago
parent
commit
8a960548c0

+ 5 - 1
src/packages/checkbox/checkbox.vue

@@ -63,7 +63,10 @@ export default {
   	watch:{
   		value(){
   			this.isChecked = this.looseEqual(this.value,this.trueValue)
-  		}
+		},
+	    checked(newValue,oldValue){
+			this.isChecked = newValue;
+		}
   	},
 	data() {
 		
@@ -73,6 +76,7 @@ export default {
 	},
 	
 	mounted(){
+		this.$emit('update:checked',this.isChecked ? this.trueValue : this.falseValue,this.label);
 		this.$emit('input', this.isChecked ? this.trueValue : this.falseValue,this.label);
 	},
 	methods: {

+ 19 - 3
src/packages/checkboxgroup/checkboxgroup.vue

@@ -9,7 +9,7 @@
             :size="item.size ? item.size : size"
             
             :id="item[keys.id]"
-            :checked="isOptionCheckedByDefault(item)"
+            :checked.sync="item.checked"
             
             
             v-model="checkboxValues[index]"
@@ -79,13 +79,29 @@ export default {
         return {
             ignoreChange: false,
         	checkboxValues: [],
-            initialValue: JSON.parse(JSON.stringify(this.value))
+            initialValue: []
         };
     },
     components: {
 	    [nutcheckbox.name]: nutcheckbox
-	},
+    },
+    watch:{
+        value(){
+            this.init();
+        }
+    },
+    mounted(){
+        this.init()
+    },
     methods: {
+        init(){
+            this.initialValue = this.value;
+            this.checkBoxData.map(item=>{
+                if(typeof item ==="object"){
+                    item.checked = this.isOptionCheckedByDefault(item)
+                }
+            })
+        },
         isObject(obj) {
             return obj !== null && typeof obj === 'object';
         },

+ 7 - 2
src/packages/checkboxgroup/demo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="demo-list">
-        <h4>基本用法</h4>
+        <h4>基本用法(2s后动态更新)</h4>
         <div>
             <nut-cell>
                 <span slot="title"><nut-checkboxgroup  :checkBoxData="data1" v-model="group1"></nut-checkboxgroup></span>
@@ -34,7 +34,7 @@
         <h4>禁用动效</h4>
         <div>
             <nut-cell>
-                <span slot="title"><nut-checkboxgroup  :checkBoxData="['选项1','选项2']" v-model="group6"  :animation="false" ></nut-checkboxgroup></span>
+                <span slot="title"><nut-checkboxgroup  :checkBoxData="data33" v-model="group6"  :animation="false" ></nut-checkboxgroup></span>
 
             </nut-cell>
             <p>选择状态:{{group6}}</p>
@@ -121,6 +121,11 @@ export default {
             ],
         };
     },
+    mounted(){
+        setTimeout(() => {
+            this.group1.push('选项B')
+        }, 2000);
+    },
     methods: {
         changeEvt(val,label,e){
             console.log(0,val,label,e)

+ 7 - 2
src/packages/checkboxgroup/doc.md

@@ -1,6 +1,6 @@
 # CheckboxGroup 复选按钮
 
-## 基本用法
+## 基本用法(2s后动态更新)
 
 ```html
 <nut-checkboxgroup  
@@ -10,7 +10,7 @@
 ```
 
 ```javascript
- data() {
+data() {
     return {
     	data:[
             {id:11,value:'选项A',label:'选项A'},
@@ -20,6 +20,11 @@
         ],
         group: ['选项A'],
     };
+},
+mounted(){
+    setTimeout(() => {
+        this.group.push('选项B')
+    }, 2000);
 }
 ```
 v-model绑定的数组选项对应data的value值,控制选项是否选中,如代码所示,‘选项A’被勾选。如果group为空那么所有选项未选中。