我如何能够在 vue js html 中以给定格式进行多项选择和传递数据? [英] How would I be able to multiple select and pass data in the given format in vue js html?

查看:20
本文介绍了我如何能够在 vue js html 中以给定格式进行多项选择和传递数据?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

规则:[{名称:空,部分:空,数据:[{head:null,value:null}]}],

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

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

请更改选择以阅读问题

 addForm = new Vue({el: "#addForm",数据: {规则:[{名称:空,部分:空,数据: [{头:空,值:空}]}],},方法: {addNewRules:函数(){this.rules.push({名称:空,部分:空,数据: [{头:空,值:空}]});},}})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></脚本><div id="addForm"><div class="card-content" v-for="(bok, index) in rules" :key="index"><p>这是对我来说很好的第一部分</p><div 类="行"><div class="col-md-6"><div class="form-group label-floating"><label class="control-label">行为</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></选择></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>选择ACT时,1972年在这里规则.DATA.HEAD.对我来说很好</p><div class="col-md-4"><div class="form-group label-floating"><label class="control-label">武器</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>在选择规则时,2012如何传递值规则.Data.head在这种情况下.这里有两个输入字段???</p><div class="col-md-4"><div class="form-group label-floating"><label class="control-label">项目</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">查获数量</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>在选择ACT时,1931年它是一个选择选项,我需要从这里选择多个选项并将值作为规则.Data.head.//选择多个选项后,我有与选项对应的输入字段.这将作为 rules.data.value 发送.如何这样做?</p><div class="col-md-4"><div class="form-group label-floating"><label class="control-label">选择</label><select class="form-control" v-model="bok.data[0].head" multiple=""><option value="1">生活</option><option value="2">Enment</option></选择></div></div></div><div class="row" v-if="bok.data[0].head == 1"><p>如果选项是 1,我应该显示这个并将值作为 rules.data.value 传递.这里有两个输入字段如何传递值</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">没有.</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">模型</label>

解决方案

我的做法基本上是改变data[0].headdata[0].value<的类型/code> 取决于您选择的选项.

例如,如果您选择 Rule,2012,那么 data[0].head 将是一个带有 objectitemqty 作为其项目.如果您选择 Act,1961data[0].head 将是一个 array 数字(例如 ['1', '2']) 和 data[0].value 将是具有 area_1object>area_2numbermodel 或所有四项.p>

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

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

addForm = new Vue({el: "#addForm",数据: {规则:[{名称:空,部分:空,数据: [{头:空,值:空}]}],},方法: {addNewRules:函数(){this.rules.push({名称:空,部分:空,数据: [{头:空,值:空}]});},removeRuleDataValueProps:函数(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:函数(i){var d = this.rules[i].data[0],h = d.头,_h = d._head,_restore = 真;如果(未定义 === _h){d._head = h;_restore = 假;}开关(this.rules[i].name){案例规则,2012":var a = Array.isArray(h);if (a || null === h || 'object' !== typeof h) {Vue.set(d, 'head', {});}休息;案例1961 年法案":if (!Array.isArray(h)) {Vue.set(d, 'head', []);}休息;默认:if (_restore && undefined !== _h) {d.head = _h;}休息;}},_setRuleDataValueDataType:函数(i){var d = this.rules[i].data[0],v = d.值,_v = d._value,_restore = 真;如果(未定义 === _v){d._value = v;_restore = 假;}开关(this.rules[i].name){案例1972 年法案":案例1961 年法案":var a = Array.isArray(v);if (a || null === v || 'object' !== typeof v) {Vue.set(d, '值', {});}如果(_restore){this.removeRuleDataValueProps(i);}休息;默认:if (_restore && undefined !== _v) {d.value = _v;}休息;}},设置规则数据类型:函数(i,k){if (this.rules[i] && this.rules[i].data[0]) {如果 (!k || '头' === k) {this._setRuleDataHeadDataType(i);}if (!k || '值' === k) {this._setRuleDataValueDataType(i);}}}}})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><div id="addForm"><h3>尝试不同的选项并查看 JSON 输出的变化.</h3><div class="card-content" v-for="(bok, index) in rules" :key="index"><p>这是对我来说很好的第一部分</p><div 类="行"><div class="col-md-6"><div class="form-group label-floating"><label class="control-label">行为</label><!-- 这里我们根据选择的选项改变 `bok.data[0].head` 的类型.--><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></选择></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><!-- 这里,`bok.data[0].head` 应该是一个`string`.--><div class="row" v-if="bok.name == 'Act,1972'">< p>选择ACT时,1972年在这里规则.DATA.HEAD.对我来说很好</p><div class="col-md-4"><div class="form-group label-floating"><label class="control-label">武器</label><input type="text" class="form-control" v-model="bok.data[0].head" @change="setRuleDataType(index, 'value')" required=""></div></div></div><!-- 这里,`bok.data[0].head` 是一个带有 'item' 和 'qty' 的 `object`.--><div class="row" v-if="bok.name == 'Rule,2012'">< p>在选择规则时,2012如何传递值规则.Data.head在这种情况下.这里有两个输入字段???</p><div class="col-md-4"><div class="form-group label-floating"><label class="control-label">项目</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">查获数量</label>

I need to pass the data in the given format.

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

This is the problem I am facing. Hope somebody could help me sort out a solution. The snippet is given. I need to pass data in the format given above. If another array is needed inside rules[], it is also fine

Is another array needed for head and value inside data[]. This will be also fine, if needed. Hoping for a help. Please help me to have a solution.

Please change the select to read the issues

    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>

解决方案

My approach is basically change the type of the data[0].head and data[0].value depending on the options you selected.

So for example, if you select Rule,2012, then data[0].head would be an object with item and qty as its items. And if you select Act,1961, data[0].head would be an array of numbers (e.g. ['1', '2']) and data[0].value would be an object with area_1 and area_2 or number and model or all the four items.

See and try the code snippet to see the code I added/changed.

(Or compare your code with mine and you'd see the changes.)

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>

这篇关于我如何能够在 vue js html 中以给定格式进行多项选择和传递数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆