我如何能够在 vue js html 中以给定格式传递多个 select 和数据？

Question

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

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

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

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

请更改select阅读问题

    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

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

因此，例如，如果您 select Rule,2012，那么 data[0].head 将是 object，其中 item 和 qty 作为其项目。如果您 select Act,1961，data[0].head 将是一个 array 数字（例如 ['1', '2']），而 data[0].value 将是一个 object 与 area_1 和 area_2 或 number 和 model 或全部四项.

看代码片段试试看我的代码added/changed.

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

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>

Answer 2

我的看法，

根据你提供的HTML，创建一个数据属性=ruleTemplate（确保v-model和相关的表单控件）
添加新规则时，将模板的一个克隆推送到规则
当您需要数据时，只需将规则转换为特定格式即可 this.getFormattedRules 在下面的演示中。

下面是演示：

addForm = new Vue({
      el: "#addForm",
      data: {
        ruleTemplates: {
          name: '',
          section: '',
          subMenu: {
          'Act,1972': '',
          'Rule,2012': {'item': '','qty': ''},
          'Act,1961': {'head':[], options:{'option1':'', 'option2':''}}
          }
        },
        rules: [{
            name: '',
            section: '',
            subMenu: {
            'Act,1972': '',
            'Rule,2012': {'item': '','qty': ''},
            'Act,1961': {'head':[], options:{'option1':'', 'option2':''}}
            }
          }
        ],
      },
      computed: {
        formatedJson: function () {
          let handler1972 = function (data) {
            return [{'head': 'Arms', 'value': data}]
          }
          let handler2012 = function (data) {
            return [{'head': 'item', 'value': data.item},{'head': 'qty', 'value': data.qty}]
          }
          let handler1961 = function (data) {
            return [{'head': 'option1', 'value': data.options.option1},{'head': 'option1', 'value': data.options.option2}]
          }
          let handlers = {'Act,1972': handler1972, 'Rule,2012': handler2012, 'Act,1961': handler1961
          }
          return this.rules.map((rule) => {
            let formatedRule = new Object()
            // convert the rule to the specific format
            formatedRule.name = rule.name
            formatedRule.section = rule.section
            handler = handlers[rule.name]
            formatedRule.data = handler ? handler(rule.subMenu[rule.name]) : []
            return formatedRule
          })
        }
      },
      methods: {
        addNewRules: function() {
          this.rules.push(Object.assign({},this.ruleTemplates))
        }
      }
    })

.show-format {
  position:absolute;
  top:2px;
  right -4px;
  background-color:gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
   
   <div id="addForm">
    <div class="show-format">Format: {{formatedJson}}</div>
    <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.subMenu['Act,1972']" 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.subMenu['Rule,2012']['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.subMenu['Rule,2012']['qty']" 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.subMenu['Act,1961'].head" >
                    <option value="1">life</option>
                    <option value="2">Enment</option>
                  </select>
                </div>
              </div>
            </div>
       
            <div class="row" v-if="bok.subMenu['Act,1961'].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.subMenu['Act,1961'].options.option1">
                </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.subMenu['Act,1961'].options.option2">
                </div>
              </div>
            </div>
            <div class="row" v-if="bok.subMenu['Act,1961'].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.subMenu['Act,1961'].options.option1">
                </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.subMenu['Act,1961'].options.option2">
                </div>
              </div>
            </div>
          </div>
          <a @click="addNewRules" style="background-color:green">Add Another Rule</a>
        </div>

Answer 3

嘿，你为什么不使用 multi-select 复选框下拉菜单并在复选框上应用 v-model。？ Link: How to use Checkbox inside Select Option

我如何能够在 vue js html 中以给定格式传递多个 select 和数据？

How would I be able to multiple select and pass data in the given format in vue js html?

javascript

jquery

vue.js

vue-router

vue-component