使用v-for时如何在vue js html中仅显示该选项的输入字段？

Question

我尝试了几种解决方案。

我的问题是，当我选择选项1时，我只获得与此相关的输入字段。由于我使用的是v-for，我有一个添加按钮，所以我现在可以选择另一个选项，但是当我选择该选项时，两个输入字段都相对于第二个选项发生了变化。如何显示与所选选项对应的输入字段。

我尝试的代码是

我的json数据是

[{
    "_id": "5b052126c3a5552bac060fab",
    "refId": 7929,
    "type": "text",
    "text": "Indian Act 1931",
    "__v": 0,
    "feilds": [{
        "refId": 7912,
        "name": "arms(if any)",
        "_id": "5b052126c3a5552bac060fac",
        "sections": [],
        "subFeilds": []
    }]
}, {
    "_id": "5b05244f90a7000f44bcbbb6",
    "refId": 7930,
    "type": "text",
    "text": "Narcotic",
    "__v": 0,
    "feilds": [{
        "refId": 7913,
        "name": "qty",
        "_id": "5b05244f90a7000f44bcbbb7",
        "sections": [],
        "subFeilds": []
    }]
}, {
    "_id": "5b052b4090a7000f44bcbbbf",
    "refId": 7933,
    "type": "option",
    "text": "Ker",
    "__v": 0,
    "feilds": [{
        "refId": 7918,
        "name": "wild",
        "_id": "5b052b4090a7000f44bcbbc2",
        "sections": ["sec1", "sec2"],
        "subFeilds": [{
            "refId": 17890,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc4"
        }, {
            "refId": 7891,
            "name": "item",
            "_id": "5b052b4090a7000f44bcbbc3"
        }]
    }, {
        "refId": 7919,
        "name": "enc",
        "_id": "5b052b4090a7000f44bcbbc0",
        "sections": ["sec2"],
        "subFeilds": [{
            "refId": 7892,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc1"
        }]
    }]
}]

我根据json数据显示我的字段

我的小提琴是

https://jsfiddle.net/u22t359x/1/

在这里，您可以查看我发生的事情。当我选择选项1时，输入字段即将到来，当我点击添加新规则并选择另一个选项时，所有输入字段都被该选项的输入字段替换。

请检查并帮助我找到解决方案。

首先，当我从下拉输入野战武器（如果有的话）中选择印第安法案1931时。现在单击Add Another Rule。从列表中选择Narcotic。现在印度法案1931的输入字段已改为数量。这应该保持为武器（如果有的话）。 Narcotic的输入字段应该是数量

Answer 1

  

<div v-else-if = "ter === 'option'"> =＆gt; <div v-else-if = "bok.ter === 'option'">

＆＃13;

＆＃13;

  var regBox = new Vue({
    el: "#regBox",
    data: {
      type: '',
      text: '',
      feilds: [
        /*{
                name : null,
                sections:[],
                subfeilds : [{name:null}],      
            }*/
      ],
      data: [{
        "_id": "5b052126c3a5552bac060fab",
        "refId": 7929,
        "type": "text",
        "text": "Indian Act 1931",
        "__v": 0,
        "feilds": [{
          "refId": 7912,
          "name": "arms(if any)",
          "_id": "5b052126c3a5552bac060fac",
          "sections": [],
          "subFeilds": []
        }]
      }, {
        "_id": "5b05244f90a7000f44bcbbb6",
        "refId": 7930,
        "type": "text",
        "text": "Narcotic",
        "__v": 0,
        "feilds": [{
          "refId": 7913,
          "name": "qty",
          "_id": "5b05244f90a7000f44bcbbb7",
          "sections": [],
          "subFeilds": []
        }]
      }, {
        "_id": "5b052b4090a7000f44bcbbbf",
        "refId": 7933,
        "type": "option",
        "text": "Ker",
        "__v": 0,
        "feilds": [{
          "refId": 7918,
          "name": "wild",
          "_id": "5b052b4090a7000f44bcbbc2",
          "sections": ["sec1", "sec2"],
          "subFeilds": [{
            "refId": 17890,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc4"
          }, {
            "refId": 7891,
            "name": "item",
            "_id": "5b052b4090a7000f44bcbbc3"
          }]
        }, {
          "refId": 7919,
          "name": "enc",
          "_id": "5b052b4090a7000f44bcbbc0",
          "sections": ["sec2"],
          "subFeilds": [{
            "refId": 7892,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc1"
          }]
        }]
      }],
      filesa: '',
      allen: '',
      all: '',
      rule: '',
      plan_amt: '',
      allenn1: '',
      rules: [{
        name: null,
        section: null,
        data: [{
          head: null,
          value: null
        }]
      }],
    },
    mounted: function() {
      setTimeout(_ => {
        this.data = [{
          "_id": "5b052126c3a5552bac060fab",
          "refId": 7929,
          "type": "text",
          "text": "Indian Act 1931",
          "__v": 0,
          "feilds": [{
            "refId": 7912,
            "name": "arms(if any)",
            "_id": "5b052126c3a5552bac060fac",
            "sections": [],
            "subFeilds": []
          }]
        }, {
          "_id": "5b05244f90a7000f44bcbbb6",
          "refId": 7930,
          "type": "text",
          "text": "Narcotic",
          "__v": 0,
          "feilds": [{
            "refId": 7913,
            "name": "qty",
            "_id": "5b05244f90a7000f44bcbbb7",
            "sections": [],
            "subFeilds": []
          }]
        }, {
          "_id": "5b052b4090a7000f44bcbbbf",
          "refId": 7933,
          "type": "option",
          "text": "Ker",
          "__v": 0,
          "feilds": [{
            "refId": 7918,
            "name": "wild",
            "_id": "5b052b4090a7000f44bcbbc2",
            "sections": ["sec1", "sec2"],
            "subFeilds": [{
              "refId": 17890,
              "name": "qty",
              "_id": "5b052b4090a7000f44bcbbc4"
            }, {
              "refId": 7891,
              "name": "item",
              "_id": "5b052b4090a7000f44bcbbc3"
            }]
          }, {
            "refId": 7919,
            "name": "enc",
            "_id": "5b052b4090a7000f44bcbbc0",
            "sections": ["sec2"],
            "subFeilds": [{
              "refId": 7892,
              "name": "qty",
              "_id": "5b052b4090a7000f44bcbbc1"
            }]
          }]
        }]
      }, 1000)
    },
    methods: {
      addNewRules: function() {
        this.rules.push({
          name: null,
          section: null,
          data: [{
            head: null,
            value: null
          }]
        });
      },
      setCost(bok) {
        var vm = this;
        var name = bok.name;
        var obj = this.data.filter(o=>o.refId==bok.name)[0] || {allen1:[]}
        bok.ter = obj.type;
        bok.allen = obj.text;
        bok.allen1 = obj.feilds;
      },
      setRule(bok) {
        for (let rule of bok.allen1) {
          if (rule.refId === bok.rule) {
            bok.al2 = rule.subFeilds;
          }
        }
      },
      handelSubmit: function(e) {
        var vm = this;
        data = {};
        data['feilds'] = this.feilds;
        data['type'] = this.type;
        data['text'] = this.text;
        $.ajax({
          url: 'http://localhost:4000/add/act/',
          data: data,
          type: "POST",
          dataType: 'json',
          success: function(e) {
            if (e.status) {
              alert("Registration Success");
            } else {
              alert("Registration Failed");
              vm.response = e;
            }
          }
        });
        return false;
      },
    },
  });

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div class="col-md-12 mr-auto" id="regBox">
  <form class="form" method="POST" v-on:submit.prevent="handelSubmit($event);">
    <div class="card-content" v-for="(bok, index) in rules" :key="index">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">
              <i class="material-icons">room</i>
            </span>
          </div>
          <select class="form-control"  v-model="bok.name" name="type" @change="setCost(bok)">
            <option value="" selected disabled hidden>Choose Type here</option>
            <option v-for="post in data" v-bind:value="post.refId" >{{post.text}}</option>
          </select>
        </div>
      </div>
      <div v-if="bok.ter === 'text'">
        <div v-for="(all,index) in bok.allen1" :key="index">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="material-icons">face</i>
                  {{all.name}}
                </span>
              </div>
              <input type="text" class="form-control" v-model="bok.data[0].head" >
            </div>
          </div>
        </div>
      </div>
      
      <div v-else-if = "bok.ter === 'option'">
        <select class="form-control" v-model="bok.rule" name="rule" @change="setRule(bok)">
          <option value="" selected disabled hidden>Choose Type here</option>
          <option v-for="pl in bok.allen1" v-bind:value="pl.refId" >{{pl.name}}</option>
        </select>
        <div v-for="all3 in bok.al2">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="material-icons">face</i>
                  {{all3.name}}
                </span>
              </div>
              <input type="text" class="form-control" >
            </div>
          </div>
        </div>
        {{bok.al2}}
      </div>
      <div v-else>erg
      </div>
      {{bok.al2}}
      <h3>The JSON value of <code>bok</code></h3>
      <textarea rows="3" cols="75%" readonly class="form-control">{{ JSON.stringify(bok) }}</textarea>
    </div>
    <a @click="addNewRules">Add Another Rule</a>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你想要的吗？

var regBox = new Vue({
    el: "#regBox",
    data: {
      type: '',
      text: '',
      feilds: [
        /*{
                name : null,
                sections:[],
                subfeilds : [{name:null}],      
            }*/
      ],
      data: [{
        "_id": "5b052126c3a5552bac060fab",
        "refId": 7929,
        "type": "text",
        "text": "Indian Act 1931",
        "__v": 0,
        "feilds": [{
          "refId": 7912,
          "name": "arms(if any)",
          "_id": "5b052126c3a5552bac060fac",
          "sections": [],
          "subFeilds": []
        }]
      }, {
        "_id": "5b05244f90a7000f44bcbbb6",
        "refId": 7930,
        "type": "text",
        "text": "Narcotic",
        "__v": 0,
        "feilds": [{
          "refId": 7913,
          "name": "qty",
          "_id": "5b05244f90a7000f44bcbbb7",
          "sections": [],
          "subFeilds": []
        }]
      }, {
        "_id": "5b052b4090a7000f44bcbbbf",
        "refId": 7933,
        "type": "option",
        "text": "Ker",
        "__v": 0,
        "feilds": [{
          "refId": 7918,
          "name": "wild",
          "_id": "5b052b4090a7000f44bcbbc2",
          "sections": ["sec1", "sec2"],
          "subFeilds": [{
            "refId": 17890,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc4"
          }, {
            "refId": 7891,
            "name": "item",
            "_id": "5b052b4090a7000f44bcbbc3"
          }]
        }, {
          "refId": 7919,
          "name": "enc",
          "_id": "5b052b4090a7000f44bcbbc0",
          "sections": ["sec2"],
          "subFeilds": [{
            "refId": 7892,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc1"
          }]
        }]
      }],
      filesa: '',
      allen: '',
      all: '',
      rule: '',
      plan_amt: '',
      allenn1: '',
      rules: [{
        name: null,
        section: null,
        rule:[],
        data: [{
          head: null,
          value: null
        }]
      }],
    },
    mounted: function() {
      setTimeout(_ => {
        this.data = [{
          "_id": "5b052126c3a5552bac060fab",
          "refId": 7929,
          "type": "text",
          "text": "Indian Act 1931",
          "__v": 0,
          "feilds": [{
            "refId": 7912,
            "name": "arms(if any)",
            "_id": "5b052126c3a5552bac060fac",
            "sections": [],
            "subFeilds": []
          }]
        }, {
          "_id": "5b05244f90a7000f44bcbbb6",
          "refId": 7930,
          "type": "text",
          "text": "Narcotic",
          "__v": 0,
          "feilds": [{
            "refId": 7913,
            "name": "qty",
            "_id": "5b05244f90a7000f44bcbbb7",
            "sections": [],
            "subFeilds": []
          }]
        }, {
          "_id": "5b052b4090a7000f44bcbbbf",
          "refId": 7933,
          "type": "option",
          "text": "Ker",
          "__v": 0,
          "feilds": [{
            "refId": 7918,
            "name": "wild",
            "_id": "5b052b4090a7000f44bcbbc2",
            "sections": ["sec1", "sec2"],
            "subFeilds": [{
              "refId": 17890,
              "name": "qty",
              "_id": "5b052b4090a7000f44bcbbc4"
            }, {
              "refId": 7891,
              "name": "item",
              "_id": "5b052b4090a7000f44bcbbc3"
            }]
          }, {
            "refId": 7919,
            "name": "enc",
            "_id": "5b052b4090a7000f44bcbbc0",
            "sections": ["sec2"],
            "subFeilds": [{
              "refId": 7892,
              "name": "qty",
              "_id": "5b052b4090a7000f44bcbbc1"
            }]
          }]
        }]
      }, 1000)
    },
    methods: {
      addNewRules: function() {
        this.rules.push({
          name: null,
          section: null,
          rule:[],
          data: [{
            head: null,
            value: null
          }]
        });
      },
      setCost(bok) {
        var vm = this;
        var name = bok.name;
        var obj = this.data.filter(o=>o.refId==bok.name)[0] || {allen1:[]}
        bok.ter = obj.type;
        bok.allen = obj.text;
        bok.allen1 = obj.feilds;
      },
      handelSubmit: function(e) {
        var vm = this;
        data = {};
        data['feilds'] = this.feilds;
        data['type'] = this.type;
        data['text'] = this.text;
        $.ajax({
          url: 'http://localhost:4000/add/act/',
          data: data,
          type: "POST",
          dataType: 'json',
          success: function(e) {
            if (e.status) {
              alert("Registration Success");
            } else {
              alert("Registration Failed");
              vm.response = e;
            }
          }
        });
        return false;
      },
    },
  });

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div class="col-md-12 mr-auto" id="regBox">
  <form class="form" method="POST" v-on:submit.prevent="handelSubmit($event);">
    <div class="card-content" v-for="(bok, index) in rules" :key="index">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">
              <i class="material-icons">room</i>
            </span>
          </div>
          <select class="form-control"  v-model="bok.name" name="type" @change="setCost(bok)">
            <option value="" selected disabled hidden>Choose Type here</option>
            <option v-for="post in data" v-bind:value="post.refId" >{{post.text}}</option>
          </select>
        </div>
      </div>
      <div v-if="bok.ter === 'text'">
        <div v-for="(all,index) in bok.allen1" :key="index">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="material-icons">face</i>
                  {{all.name}}
                </span>
              </div>
              <input type="text" class="form-control" v-model="bok.data[0].head" >
            </div>
          </div>
        </div>
      </div>
      
      <div v-else-if = "bok.ter === 'option'">
        <select class="form-control" v-model="bok.rule" name="rule" multiple>
          <option value="" selected disabled hidden>Choose Type here</option>
          <option v-for="pl in bok.allen1" :value="pl" >{{pl.name}}</option>
        </select> Hold down the control key and click the option to select multiple options
        <div v-for="item in bok.rule">
          <div v-for="all3 in item.subFeilds">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="material-icons">face</i>
                    {{all3.name}}
                  </span>
                </div>
                <input type="text" class="form-control" >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>erg
      </div>
      {{bok.al2}}
      <h3>The JSON value of <code>bok</code></h3>
      <textarea rows="3" cols="75%" readonly class="form-control">{{ JSON.stringify(bok) }}</textarea>
    </div>
    <a @click="addNewRules">Add Another Rule</a>
  </form>
</div>