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