如何在存儲在數組中的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數據中調用rules []。 請幫我有一個相同的答案。 我真的很困惑如何解決這個問題。

正如給定的html，我需要提供一個包含select的html，以獲得我得到json響應的所有選項

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
      }]
    });
  });
})();

演示

UPDATE

或更簡單但可能會棘手的方法是：

// 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: {
    ...
  }
});