从 vuejs 表单数据创建 JSON 对象

Posted

技术标签:

【中文标题】从 vuejs 表单数据创建 JSON 对象【英文标题】:Create JSON object from vuejs form data 【发布时间】:2021-03-08 01:32:01 【问题描述】:

我正在尝试从提交时的表单数据创建一个 JSON 对象。

我已经设法让它与一个变量一起工作。有没有更好的方法来创建 JSON 对象?

表格

<form @submit.prevent="submit">
   <div class="form-group">
      <label class="inputa-label" for="exampleInputEmail1"
         >Email address</label
         >
      <input
         type="email"
         class="form-control inputa"
         id="exampleInputEmail1"
         placeholder="Enter email"
         required
         v-model="email"
         />
   </div>
   <div class="form-group">
      <label class="inputa-label" for="exampleInputPassword1"
         >Phone number</label
         >
      <input
         type="number"
         class="form-control inputa"
         id="exampleInputPassword1"
         placeholder="Phone"
         v-model="phone"
         />
   </div>
   <div class="form-group">
      <label class="inputa-label" for="exampleInputPassword1"
         >Information</label
         >
      <textarea
         class="form-control inputa"
         aria-label="With textarea"
         v-model="information"
         ></textarea>
   </div>
   <button
      type="submit"
      style="font-weight:600; padding: .8125rem 1.25rem"
      class="btn btn-primary"
      >
   Submit
   </button>
</form>

方法:

  data() 
    return 
      email:"",
      phone:"",
      information:"",
    ;
  ,
  methods: 
    submit() 

      var data = ' "Email":"' + this.email + '" , "Phone":"' + this.phone + '", "Information":"' + this.information + '" ';
      
    ,
  ,

我已经让它与一个变量一起工作,但我想知道是否有更好的方法来做到这一点。

【问题讨论】:

提醒一下,默认提交功能会为您发送表单数据,您不需要自己生成 JSON 有效负载。但是,如果您仍然希望发送一些自定义有效负载,如果您使用的是 Axios,您可以只在 axios.post 请求中提供一个 javascript 对象! 我正在使用 axios 发布变量“数据”。我只是想知道是否有更熟练的方法来做到这一点,而不是我如何处理我的变量。谢谢@Ayudh 你可以从json对象制作,然后使用JSON.stringify 【参考方案1】:

回答这个问题,我想你要找的是JSON.stringify()

const data = JSON.stringify(
  Email: this.email,
  Phone: this.phone,
  Information: this.information
)

【讨论】:

以上是关于从 vuejs 表单数据创建 JSON 对象的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 axios 将数据从 vuejs 表单提交到 zapier webhook?

如何创建动态 html 表单的 JSON 对象(表单元素)?

从 JSON 数据的嵌套表单数组填充表单控件中的值

Vuejs:Axios 发布 JSON 数据和 Image 数据

Google Closure - 将数据表单数据转换为 json 对象

在 for 循环期间访问嵌套对象 VueJS