javascript - 我如何能够在 vue js html 中以给定格式多次选择和传递数据？

Question

我需要以给定的格式传递数据。

rules : [{
        name:null,
        section:null,
        data   : [{head:null,value:null}]
    }],

这就是我面临的问题。希望有人能帮我找出解决方案。给出了片段。我需要以上面给出的格式传递数据。如果 rules[] 里面需要另外一个数组也可以

data[] 中的 head 和 value 需要另一个数组。如果需要，这也可以。希望得到帮助。请帮助我找到解决方案。

请更改选择以阅读问题

    addForm = new Vue({
      el: "#addForm",
      data: {
        rules: [{
          name: null,
          section: null,
          data: [{
            head: null,
            value: null
          }]
        }],

      },
      methods: {
        addNewRules: function() {
          this.rules.push({
            name: null,
            section: null,
            data: [{
              head: null,
              value: null
            }]
          });
        },
      }
    })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
   

        <div id="addForm">
      
    
    <div class="card-content" v-for="(bok, index) in rules" :key="index">
         <p>This is the first part which is fine for me</p>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group label-floating">
                  <label class="control-label">Act</label>
                  <select class="form-control" v-model="bok.name">
                    <option value="Act,1972">Act,1972</option>
                    <option value="Rule,2012">Rule,2012(CEMR)</option>
                    <option value="Act,1961">Act,1961</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group label-floating">
                <label class="control-label">Section</label>
                <input type="text" class="form-control" v-model="bok.section">
              </div>
            </div>
    
       
        
    
    <div class="row" v-if="bok.name == 'Act,1972'">
           <p>When selecting Act,1972 is here rules.data.head. Fine for me</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Arms</label>
                  <input type="text" class="form-control" v-model="bok.data[0].head" required="">
                </div>
              </div>
            </div>
    
        
            <div class="row" v-if="bok.name == 'Rule,2012'">
<p>When Selecting Rule,2012 HOW TO PASS values rules.data.head in this case . There are two input fields here???</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Item</label>
                  <input type="text" class="form-control" v-model="bok.data[0].head" required="">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Quantity Seized</label>
                  <input type="text" class="form-control" v-model="bok.data[0].head" required="">
                </div>
              </div>
            </div>
    
       
            <div class="row" v-if="bok.name == 'Act,1961'">
 <p>When selecting Act,1931 Its a select option, I need to select multiple options from here and pass values as rules.data.head. //After I select multiple options I have input fields corresponding to the options. This to be send as rules.data.value.. How
            to do this?</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Select</label>
                  <select class=" form-control" v-model="bok.data[0].head" multiple="">
                    <option value="1">life</option>
                    <option value="2">Enment</option>
                  </select>
                </div>
              </div>
            </div>
       
            <div class="row" v-if="bok.data[0].head == 1">
 <p>If option is 1, i should display this and pass value as rules.data.value . HERE THERE ARE TWO INPUT FIELDS How to pass the values</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Area1</label>
                  <input type="text" class="form-control" required="" v-model="bok.data[0].value">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Area2</label>
                  <input type="text" class="form-control" required="" v-model="bok.data[0].value">
                </div>
              </div>
            </div>
            <div class="row" v-if="bok.data[0].head == 2">
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">No.</label>
                  <input type="text" class="form-control" required="" v-model="bok.data[0].value">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Model</label>
                  <input type="text" class="form-control" required="">
                </div>
              </div>
            </div>
          </div>
          <a @click="addNewRules">Add Another Rule</a>
        </div>

Answer 1

我的方法基本上是根据您选择的选项更改 data[0].head 和 data[0].value 的类型。

例如，如果您选择 Rule,2012，则 data[0].head 将是一个 object with item 和 qty 作为它的项目。如果您选择 Act,1961，data[0].head 将是一个 array 数字(例如 ['1' , '2']) 和 data[0].value 将是一个 object with area_1 和 area_2 或 number 和 model 或所有四个项目。

查看并尝试代码片段以查看我添加/更改的代码。

(或者将您的代码与我的代码进行比较，您会看到变化。)

addForm = new Vue({
      el: "#addForm",
      data: {
        rules: [{
          name: null,
          section: null,
          data: [{
            head: null,
            value: null
          }]
        }],

      },
      methods: {
        addNewRules: function() {
          this.rules.push({
            name: null,
            section: null,
            data: [{
              head: null,
              value: null
            }]
          });
        },

        removeRuleDataValueProps: function(i) {
          var d = this.rules[i].data[0];

          if (jQuery.inArray('1', d.head) < 0) {
            Vue.delete(d.value, 'area_1');
            Vue.delete(d.value, 'area_2');
          }

          if (jQuery.inArray('2', d.head) < 0) {
            Vue.delete(d.value, 'number');
            Vue.delete(d.value, 'model');
          }
        },

        _setRuleDataHeadDataType: function(i) {
          var d = this.rules[i].data[0],
            h = d.head,
            _h = d._head,
            _restore = true;

          if (undefined === _h) {
            d._head = h;
            _restore = false;
          }

          switch (this.rules[i].name) {
            case 'Rule,2012':
              var a = Array.isArray(h);
              if (a || null === h || 'object' !== typeof h) {
                Vue.set(d, 'head', {});
              }

              break;

            case 'Act,1961':
              if (!Array.isArray(h)) {
                Vue.set(d, 'head', []);
              }

              break;

            default:
              if (_restore && undefined !== _h) {
                d.head = _h;
              }

              break;
          }
        },

        _setRuleDataValueDataType: function(i) {
          var d = this.rules[i].data[0],
            v = d.value,
            _v = d._value,
            _restore = true;

          if (undefined === _v) {
            d._value = v;
            _restore = false;
          }

          switch (this.rules[i].name) {
            case 'Act,1972':
            case 'Act,1961':
              var a = Array.isArray(v);
              if (a || null === v || 'object' !== typeof v) {
                Vue.set(d, 'value', {});
              }

              if (_restore) {
                this.removeRuleDataValueProps(i);
              }

              break;

            default:
              if (_restore && undefined !== _v) {
                d.value = _v;
              }

              break;
          }
        },

        setRuleDataType: function(i, k) {
          if (this.rules[i] && this.rules[i].data[0]) {
            if (!k || 'head' === k) {
              this._setRuleDataHeadDataType(i);
            }

            if (!k || 'value' === k) {
              this._setRuleDataValueDataType(i);
            }
          }
        }
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
   

        <div id="addForm">
      
    <h3>Try the different options and see the JSON output changes.</h3>
    <div class="card-content" v-for="(bok, index) in rules" :key="index">
         <p>This is the first part which is fine for me</p>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group label-floating">
                  <label class="control-label">Act</label>
                  <!-- Here we change the type of `bok.data[0].head` depending on the selected option. -->
                  <select class="form-control" v-model="bok.name" @change="setRuleDataType(index)">
                    <option value="Act,1972">Act,1972</option>
                    <option value="Rule,2012">Rule,2012(CEMR)</option>
                    <option value="Act,1961">Act,1961</option>
                  </select>
                </div>
              </div>
            <!--</div>-->
            <div class="col-md-6">
              <div class="form-group label-floating">
                <label class="control-label">Section</label>
                <input type="text" class="form-control" v-model="bok.section">
              </div>
            </div>
    
       
        
    <!-- Here, `bok.data[0].head` is expected to be a `string`. -->
    <div class="row" v-if="bok.name == 'Act,1972'">
           <p>When selecting Act,1972 is here rules.data.head. Fine for me</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Arms</label>
                  <input type="text" class="form-control" v-model="bok.data[0].head" @change="setRuleDataType(index, 'value')" required="">
                </div>
              </div>
            </div>
    
            <!-- Here, `bok.data[0].head` is an `object` with 'item' and 'qty'. -->
            <div class="row" v-if="bok.name == 'Rule,2012'">
<p>When Selecting Rule,2012 HOW TO PASS values rules.data.head in this case . There are two input fields here???</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Item</label>
                  <input type="text" class="form-control" v-model="bok.data[0].head.item" required="">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Quantity Seized</label>
                  <input type="text" class="form-control" v-model="bok.data[0].head.qty" required="">
                </div>
              </div>
            </div>
    
            <!-- Here, `bok.data[0].head` would be an array of numbers. -->
            <div class="row" v-if="bok.name == 'Act,1961'">
 <p>When selecting Act,1931 Its a select option, I need to select multiple options from here and pass values as rules.data.head. //After I select multiple options I have input fields corresponding to the options. This to be send as rules.data.value.. How
            to do this?</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Select</label>
                  <select class=" form-control" v-model="bok.data[0].head" @change="removeRuleDataValueProps(index)" multiple="">
                    <option value="1">life</option>
                    <option value="2">Enment</option>
                  </select>
                </div>
              </div>
            </div>
       
            <div class="row" v-if="jQuery.inArray('1', bok.data[0].head) > -1">
 <p>If option is 1, i should display this and pass value as rules.data.value . HERE THERE ARE TWO INPUT FIELDS How to pass the values</p>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Area1</label>
                  <input type="text" class="form-control" required="" v-model="bok.data[0].value.area_1">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Area2</label>
                  <input type="text" class="form-control" required="" v-model="bok.data[0].value.area_2">
                </div>
              </div>
            </div>
            <div class="row" v-if="jQuery.inArray('2', bok.data[0].head) > -1">
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">No.</label>
                  <input type="text" class="form-control" required="" v-model="bok.data[0].value.number">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Model</label>
                  <input type="text" class="form-control" required="" v-model="bok.data[0].value.model">
                </div>
              </div>
            </div>

            <h3>The JSON value of <code>bok</code></h3>
            <textarea rows="3" cols="75%" readonly>{{ JSON.stringify(bok) }}</textarea>
          </div>
          <a @click="addNewRules">Add Another Rule</a>
        </div>