如何从动态列表中为 Vue 中的 API 响应创建列表渲染 JSON？

Posted 2023-02-16

【中文标题】如何从动态列表中为 Vue 中的 API 响应创建列表渲染 JSON？

【英文标题】：How to create a List Render JSON from a Dynamic List for an API response in Vue?

【发布时间】：2021-08-04 19:25:27

【问题描述】：

我是 Vue.js 版本 2.6.11 的初学者。

我有一个表格，人们可以在其中添加玩具清单。所以这个列表是动态的。我们如何在 POST 请求中将此动态列表添加到 JSON 数据结构中？

我无法更改 API。

例如，发送到 POST 请求的第一个列表可能是

      "toyCollection": 
       [
        
          "toyName": "yo-yo",
          "toyDescription": "ball on a string",
          "toyAge": 15,
          "company": 
            "companyName": "yo yo company"
            "companyYear": "1999"
          
        
      ]

某人第二次在此动态列表中创建玩具列表可能是

      "toyCollection": 
       [
         
          "toyName": "yo-yo",
          "toyDescription": "ball on a string",
          "toyAge": 15,
          "company": 
            "companyName": "yo yo company"
            "companyYear": "1999"
          
        ,
        
          "toyName": "barbie",
          "toyDescription": "dolls in a house",
          "toyAge": 21,
          "company": 
            "companyName": "mattel"
            "companyYear": "1959"
          
        ,
        
          "toyName": "transformers",
          "toyDescription": "robots in disguise",
          "toyAge": 20,
          "company": 
            "companyName": "Hasbro"
            "companyYear": "1984"
          
        
      ]

我们如何在 Vue 中编写它以使其具有动态性？

   methods: 
     const postRequest = 
        toyCollection: [ //if 1 toy in list
          
            toyName: "yo-yo", // this.form.toyName <---- would read the data
            toyDescription: "ball on a string", //hardcoded here for simplicity for example
            toyAge: 15,
            company: 
               companyName: "yo yo company"
               similarToysFromCompany: "1999"
            
          
        ]
       
          

如果收藏中有三个玩具

   methods: 
     const postRequest = 
        toyCollection: [ //if 3 toys in list
          
            toyName: "yo-yo",
            toyDescription: "ball on a string",
            toyAge: 15,
            company: 
               companyName: "yo yo company"
               similarToysFromCompany: "1999"
             
          ,
          
            toyName: "barbie",
            toyDescription: "dolls in a house",
            toyAge: 21,
            company: 
              companyName: "mattel"
              companyYear: "1959"
            
          ,
          
            toyName: "transformers",
            toyDescription: "robots in disguise",
            toyAge: 20,
            company: 
              companyName: "Hasbro"
              companyYear: "1984"
             
           
         ]
       
         

列表可以是任意大小，具体取决于一个人添加到此列表中的玩具数量。 我们如何根据列表进行动态化？

然后我会用这个对象调用我的 API

this.methodCallToAPI(postRequest);

感谢您的帮助！

=============== 编辑

我有一个输入字段的模板

         <form>
              <!-- Name -->
                  <input
                    v-model="form.toyName"
                    id="toy-name"
                    class="input"
                    type="text"
                  />
                </div>
          </form>

然后在脚本中，它根据用户在输入文本字段中键入的内容监视或更新数据字段。

export default 
  name: "CreateToyCollection",

  data () 
    return 
      form: 
        toyName: "",
        toyDescription: "",
        toyAge: "",
             company: 
               companyName: "",
               similarToysFromCompany: ""
             
          
        
      ,


  watch: 
      this.form.toyName = "";
      this.form.toyDescription = "";
      this.form.toyAge = "";
      // etc for Company
  

我正在处理列表部分，但这就是我想要传递动态数据的方式

【问题讨论】：

从哪里获得动态列表？

当有人填写表格并点击提交按钮时，我会从他们的文本输入中获取这些字段

那么你存储它的地方，你能分享一些更多的代码，比如脚本部分。

我进行了编辑以分享更多代码。我仍在研究如何存储列表，但存储的数据来自用户输入

【参考方案1】：

在数据中添加一个新数组toyCollection：

data () 
    return 
      toyCollection: [],
      form: 
        toyName: "",
        ...
      ,
      ...

每次提交表单时，像this.toyCollection.push(data)一样将提交的数据推送给它

稍后在您的发布请求中，您可以发送 this.toyCollection 作为有效负载。

【讨论】：

谢谢，数据中有什么？会不会是 this toyName: this.form.toyName, toyDescription: this.form.toyDescription // etc ，然后以某种方式迭代并创建这部分？

@Suzy 是的，这部分，你不需要迭代，你可以在每个表单提交时推送每个项目

在表单上，​​他们可以在一个表单提交中添加多个玩具。所以我不确定如何处理多个玩具，并设置变量的值。比如 toyName: this.form.toyName1, toyDescription: this.form.toyDescription1 //etc , toyName: this.form.toyName2, toyDescription: this.form.toyDescription2, //etc ?.可以添加大量的toyName#

我用你的例子弄明白了，谢谢！ :) 我将数据放入对象列表并将其推送到 toyCollection。