javascript - 如何在存储在数组中的 html vue js 中提供编辑功能？

Question

这是我的 json 响应

{"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]}]}

这是我为实现编辑功能而获得的数据的响应。

我正在按如下所示的格式添加数据:

    <div class="card-content" v-for="(bok, index) in rules" :key="index">
      <div class="row">
      <div class="col-md-6">
      <div class="form-group label-floating">
     <label class="control-label">Booked Under Act/Rule</label>
    <select class="form-control" v-model="bok.name">
     <option value="Act,1972">Act,1972</option>
     <option value="Rule,2012">Rule,2012</option>  
     <option value=" Act,1961">1961</option>  
    </select>
   </div>
   </div>
    <div class="col-md-6">
    <div class="form-group label-floating">
    <label class="control-label">Sec</label>
    <input type="text" class="form-control" v-model="bok.section" >
           </div>
            </div>
            </div>
             <div class="row" v-if="bok.name == 'Act,1972'">
              <div class="col-md-4">
               <div class="form-group label-floating">
            <label class="control-label">Ar(if any)</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'">
                <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">
          <option value="1">Wild</option>
          <option value="2">croach</option>
         <option value="3">Ill</option>  
        <option value="4">pass</option>
        </select>
         </div>
            </div>
              </div>
            </div> 
        <div class="row" v-if="bok.data[0].head == 1">
          <div class="col-md-4">
            <div class="form-group label-floating">
            <label class="control-label">Area </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">icted</label>
      <input type="text" class="form-control" required="">
      </div>
        </div>
        </div>
        <div class="row" v-if="bok.data[0].head == 4">
         <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>
           </div>   
        <a @click="addNewRules">Add Another Rule</a>

我将此数据发送为

addForm = new Vue({
el: "#addForm",
  data: {
    no:'',
    Date: '',
    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}] });
        },
},
}

那么，我怎样才能实现规则的编辑功能[]。 我怎样才能映射相同的。另外，编辑后我需要更新格式中的值

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

那么，在编辑过程中如何从 json 数据调用规则[]。请帮助我得到同样的答案。我真的很困惑如何找到问题的答案。

作为给定的 html，我需要提供一个包含我收到 json 响应的所有选项的 select 的 html

Answer 1

如果您只想读取 JSON 响应中的数据，或将数据添加到 Vue 应用程序/表单，则:

您可以在初始化 addForm Vue 应用程序之后在页面中的某个位置添加此代码:

// This could be just *part* of the full JSON response/data, but this is the expected
// format of the data that you assign to `json_res`.
const json_res = {"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]};

(function() {
  var d = json_res.data[0] || {};

  addForm.no = d.no;
  addForm.Date = d.Date;

  d.rules.forEach(function(r) {
    addForm.rules.push({
      name: r.name,
      section: r.section,
      data: [{
        head: r.data[0].head,
        value: r.data[0].value
      }]
    });
  });
})();

Demo

更新

或者一种更简单但可能会变得棘手的方法是:

// This would be defined before initializing `addForm`.
const json_res = {"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]};

addForm = new Vue({
  el: "#addForm",
  data: function() {
    // This would include `_id`, etc.
    return json_res.data[0];
  },
  methods: {
    ...
  }
});