checklist input name

Use `name` in checklist input fields. Fix #243
vue-generators · Oct 10, 2017 · 9c6c8d8 · 9c6c8d8
1 parent a8f09ae
commit 9c6c8d8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/dev/checklist/app.vue b/dev/checklist/app.vue
@@ -23,6 +23,7 @@ export default {
 						label: "Skills",
 						model: "skills",
 						required: true,
+						inputName:"skill",
 						min: 2,
 						listBox: true,
 						values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],

diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue
@@ -3,7 +3,7 @@
 		.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
 			.list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 				label
-					input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
+					input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)" :name="getInputName(item)")
 					| {{ getItemName(item) }}
 
 		.combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
@@ -14,7 +14,7 @@
 			.dropList
 				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 					label
-						input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
+						input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)" :name="getInputName(item)")
 						| {{ getItemName(item) }}
 </template>
 
@@ -45,10 +45,18 @@
 					return this.value.length;
 
 				return 0;
-			}   
+			}
 		},
 
 		methods: {
+
+			getInputName(item){
+				if(this.schema && this.schema.inputName && this.schema.inputName.length > 0){
+					return this.schema.inputName + "_" + this.getItemValue(item);
+				}
+				return this.getItemValue(item);
+			},
+
 			getItemValue(item) {
 				if (isObject(item)){
 					if (typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["value"] !== "undefined") {

diff --git a/test/unit/specs/fields/fieldChecklist.spec.js b/test/unit/specs/fields/fieldChecklist.spec.js
@@ -524,6 +524,7 @@ describe("fieldChecklist.vue", function() {
 				type: "checklist",
 				label: "Skills",
 				model: "skills",
+				inputName:"",
 				values: [
 					"HTML5",
 					"Javascript",
@@ -581,6 +582,39 @@ describe("fieldChecklist.vue", function() {
 					done();
 				});
 			});
+
+			it("should contain input name field withouth inputName", (done) => {
+
+				checkboxes = dropList.querySelectorAll("input[type=checkbox]");
+				expect(checkboxes[0].name).to.be.equal("HTML5");
+				expect(checkboxes[1].name).to.be.equal("Javascript");
+				expect(checkboxes[2].name).to.be.equal("CSS3");
+				expect(checkboxes[3].name).to.be.equal("CoffeeScript");
+				expect(checkboxes[4].name).to.be.equal("AngularJS");
+				expect(checkboxes[5].name).to.be.equal("ReactJS");
+				expect(checkboxes[6].name).to.be.equal("VueJS");
+
+				done();
+
+			});
+
+			it("should contain input name field with inputName", (done) => {
+
+				schema.inputName="skill";
+
+				vm.$nextTick( () => {
+					checkboxes = dropList.querySelectorAll("input[type=checkbox]");
+					expect(checkboxes[0].name).to.be.equal("skill_HTML5");
+					expect(checkboxes[1].name).to.be.equal("skill_Javascript");
+					expect(checkboxes[2].name).to.be.equal("skill_CSS3");
+					expect(checkboxes[3].name).to.be.equal("skill_CoffeeScript");
+					expect(checkboxes[4].name).to.be.equal("skill_AngularJS");
+					expect(checkboxes[5].name).to.be.equal("skill_ReactJS");
+					expect(checkboxes[6].name).to.be.equal("skill_VueJS");
+
+					done();
+				});
+			});
 
 			it("should checked the values", () => {
 				expect(isChecked(0)).to.be.false;