fix checklist validation bug #194

vue-generators · May 18, 2017 · bea085f · bea085f
1 parent 547ea2e
commit bea085f
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 4 deletions.
diff --git a/dev/checklist/app.vue b/dev/checklist/app.vue
@@ -0,0 +1,50 @@
+<template lang="html">
+	<div>
+		<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+		<pre><code>{{ model }}</code></pre>
+	</div>
+</template>
+
+<script>
+import Vue from "vue";
+import { validators } from "../../src";
+
+export default {
+	data () {
+		return {
+			model: {
+				skills: ["Javascript", "VueJS"]
+			},
+
+			schema: {
+				fields: [
+					{
+						type: "checklist",
+						label: "Skills",
+						model: "skills",
+						required: true,
+						min: 2,
+						listBox: true,
+						values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
+						validator: validators.array,
+						onChanged(model) {
+							console.log("skills changed to", model.skills);
+						},
+						onValidated(model, errors) {
+							console.log("skills validated:", errors);
+						}
+					}
+				]
+			},
+
+			formOptions: {
+				validateAfterChanged: true
+			}
+		}
+	},
+
+	created() {
+		window.app = this;
+	}
+}
+</script>
diff --git a/dev/checklist/index.html b/dev/checklist/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-form-generator multiselect demo</title>
+  </head>
+  <body>
+    <div class="container-fluid"></div>
+    <div id="app"></div>
+  	<script src="/checklist.js"></script>
+  </body>
+</html>
diff --git a/dev/checklist/main.js b/dev/checklist/main.js
@@ -0,0 +1,9 @@
+import Vue from "vue";
+import VueFormGenerator from "../../src";
+Vue.use(VueFormGenerator);
+
+import App from './app.vue';
+
+new Vue({
+    ...App
+}).$mount('#app');
diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-	import {isObject, isNil} from "lodash";
+	import {isObject, isNil, clone} from "lodash";
 	import abstractField from "../abstractField";
 	
 	export default {
@@ -90,9 +90,15 @@
 				}
 
 				if (event.target.checked) {
-					this.value.push(this.getItemValue(item));
+					// Note: If you modify this.value array, it won't trigger the `set` in computed field
+					const arr = clone(this.value);
+					arr.push(this.getItemValue(item));
+					this.value = arr;
 				} else {
-					this.value.splice(this.value.indexOf(this.getItemValue(item)), 1);
+					// Note: If you modify this.value array, it won't trigger the `set` in computed field
+					const arr = clone(this.value);
+					arr.splice(this.value.indexOf(this.getItemValue(item)), 1);
+					this.value = arr;
 				}
 			},
 

diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -33,7 +33,8 @@ module.exports = {
 
 	entry: {
 		full: path.resolve("dev", "full", "main.js"),
-		mselect: path.resolve("dev", "multiselect", "main.js")
+		mselect: path.resolve("dev", "multiselect", "main.js"),
+		checklist: path.resolve("dev", "checklist", "main.js")
 	},
 
 	output: {