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

Posted 2023-02-23

【中文标题】如何在存储在数组中的 html vue js 中提供编辑功能？

【英文标题】：How can I provide edit feature in html vue js stored in an array?

【发布时间】：2018-10-28 19:52:57

【问题描述】：

这是我的 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，我需要为我得到 json 响应的所有选项提供一个包含 select 的 html

【问题讨论】：

我看到你已经绑定了v-model？现在编辑有什么问题？

【参考方案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: 
    ...
  
);

【讨论】：

先生您能帮忙解决一下这个***.com/questions/50422599/…

您好，先生，您能看看