1 2 3 4 <div id="example">5 6 7 8 <form style="overflow: auto;">9 10 <div style="float:right; width: 50%;">11 <pre>{{input}}</pre>12 </div>13 14 <br>15 Format: <select v-model="input.format" @change="recalculateForm(); input.properties = {}; ">16 <option v-for="v in form.formats" :value="v">{{v}}</option>17 </select> 18 <div19 v-for="(values, key) in form.properties"20 >21 <tt>{{key}}</tt>22 <select v-model="input.properties[key]" @change="recalculateForm">23 <option :value="null"></option>24 <option v-for="v in values" :value="v">{{v}}</option>25 </select>26 </div>27 </form>28 29 {{ /* form */ }}30 31 <hr>32 33 <div34 class="rule"35 v-for="rule in rules"36 >37 format: <tt>{{rule.format}}</tt>38 <input type="checkbox" checked class="rule">39 <div style="padding-left: 24px;">40 <div class="properties"41 v-for="(values, key) in rule.properties"42 >43 <tt>{{key}}</tt>44 <tt>[</tt>45 <label v-for="value in values"><input type="checkbox" checked><tt>"{{value}}"</tt></label>46 <tt>]</tt>47 </div>48 </div>49 </div>50 51 </div>52 53 54 55 56 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>57 <script>58 new Vue({59 el: '#example',60 created() {61 this.recalculateForm();62 },63 methods: {64 recalculateForm() {65 66 this.form.formats = [];67 this.form.properties = {};68 69 this.rules.forEach(r => {70 71 if (this.form.formats.indexOf(r.format) < 0) {72 this.form.formats.push(r.format); // TODO: put once73 }74 75 if (this.input.format != r.format) return;76 77 console.log(r);78 79 for (p in r.properties) {80 if (!this.input.properties[p]) continue;81 if (r.properties[p].indexOf(this.input.properties[p]) < 0 ) return;82 }83 84 for (p in r.properties) {85 this.form.properties[p] = this.form.properties[p] || [];86 r.properties[p].forEach(v => {87 if (this.form.properties[p].indexOf(v) >= 0) return;88 this.form.properties[p].push(v);89 });90 }91 92 });93 94 95 96 console.log(this.form);97 },98 },99 data: {100 input: {101 format: '',102 properties: {},103 },104 form:{105 formats: [],106 properties: {107 key1: ["value1", "value2", "value3"],108 key2: ["value2", "value3"],109 },110 },111 rules: [112 {113 format: 'csv',114 properties: {115 header: ["true", "false"],116 delimiter: ["tab"],117 },118 },119 {120 format: 'csv',121 properties: {122 header: ["true"],123 delimiter: ["|"],124 },125 },126 {127 format: 'csv',128 properties: {129 header: ["false"],130 delimiter: [",", ";"],131 },132 },133 {134 format: 'json',135 properties: {136 strict: ["true", "false"],137 uniqueKeys: ["true", "false"],138 },139 },140 ],141 },142 });143 144 </script>145 146 Enlace
El enlace para compartir es: