Creo en nosotros. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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:

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados