|
1 | 1 | <template lang="pug">
|
2 | 2 | .wrapper
|
3 | 3 | .listbox.form-control(v-if="schema.listBox", :disabled="disabled")
|
4 |
| - .list-row(v-for="item in items", :class="{'is-checked': getItemIsChecked(item)}") |
| 4 | + .list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}") |
5 | 5 | label
|
6 |
| - input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @input="onChanged($event, item)") |
| 6 | + input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @input="onChanged($event, item)") |
7 | 7 | | {{ getItemName(item) }}
|
8 | 8 |
|
9 | 9 | .combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
|
|
12 | 12 | .arrow
|
13 | 13 |
|
14 | 14 | .dropList
|
15 |
| - .list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': getItemIsChecked(item)}") |
| 15 | + .list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}") |
16 | 16 | label
|
17 |
| - input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @input="onChanged($event, item)") |
| 17 | + input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @input="onChanged($event, item)") |
18 | 18 | | {{ getItemName(item) }}
|
19 | 19 | </template>
|
20 | 20 |
|
|
49 | 49 | },
|
50 | 50 |
|
51 | 51 | methods: {
|
52 |
| - getItemID(item) { |
53 |
| - if (isObject(item) && item.id) |
54 |
| - return item.id; |
55 |
| -
|
56 |
| - return item; |
| 52 | + getItemValue(item) { |
| 53 | + if (isObject(item)){ |
| 54 | + if (typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["value"] !== "undefined") { |
| 55 | + return item[this.schema.checklistOptions.value]; |
| 56 | + } else { |
| 57 | + if (typeof item["value"] !== "undefined") { |
| 58 | + return item.value |
| 59 | + } else { |
| 60 | + throw "value is not defined. If you want to use another key name, add a `value` property under `checklistOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/checklist.html#checklist-field-with-object-values"; |
| 61 | + } |
| 62 | + } |
| 63 | + } else { |
| 64 | + return item; |
| 65 | + } |
57 | 66 | },
|
58 |
| -
|
59 | 67 | getItemName(item) {
|
60 |
| - if (isObject(item) && item.name) |
61 |
| - return item.name; |
62 |
| -
|
63 |
| - return item; |
| 68 | + if (isObject(item)){ |
| 69 | + if (typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["name"] !== "undefined") { |
| 70 | + return item[this.schema.checklistOptions.name]; |
| 71 | + } else { |
| 72 | + if (typeof item["name"] !== "undefined") { |
| 73 | + return item.name |
| 74 | + } else { |
| 75 | + throw "name is not defined. If you want to use another key name, add a `name` property under `checklistOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/checklist.html#checklist-field-with-object-values"; |
| 76 | + } |
| 77 | + } |
| 78 | + } else { |
| 79 | + return item; |
| 80 | + } |
64 | 81 | },
|
65 | 82 |
|
66 |
| - getItemIsChecked(item) { |
67 |
| - return (this.value && this.value.indexOf(this.getItemID(item)) != -1); |
| 83 | + isItemChecked(item) { |
| 84 | + return (this.value && this.value.indexOf(this.getItemValue(item)) != -1); |
68 | 85 | },
|
69 | 86 |
|
70 | 87 | onChanged(event, item) {
|
|
73 | 90 | }
|
74 | 91 |
|
75 | 92 | if (event.target.checked) {
|
76 |
| - this.value.push(this.getItemID(item)); |
| 93 | + this.value.push(this.getItemValue(item)); |
77 | 94 | } else {
|
78 |
| - this.value.splice(this.value.indexOf(this.getItemID(item)), 1); |
| 95 | + this.value.splice(this.value.indexOf(this.getItemValue(item)), 1); |
79 | 96 | }
|
80 | 97 | },
|
81 | 98 |
|
|
0 commit comments