vue 提交按钮数据

Posted 2023-02-22

【中文标题】vue 提交按钮数据

【英文标题】：vue submit button data

【发布时间】：2018-01-05 23:26:29

【问题描述】：

假设我有这个代码

<main>
    <form>
        <input type="text" v-model="name"> 
        <button type="submit" @click="submit">
            Submit From Vue Property
        </button>
    </form>
</main>

这是 Vue 代码。

new Vue(
   el : 'main',
   data : 
       name : ''
   ,
   methods : 
      submit()

      
   
) 

如何从 Vue 数据属性提交到服务器？我在提交方法中使用的。

（老实说，我的实际代码很复杂，但问题是一样的。如何提交Vue数据属性呢？）

【问题讨论】：

无法完全理解你。从数据属性提交是什么意思？

之前很抱歉。我的意思是提交“this.name”或者“this.email”或者我保留在 Vue 中的其他属性。我想在提交之前先保存任何用户输入。

你想把它们保存在哪里。当您使用 v-model

时，它们会绑定到您在 data 属性中初始化的属性

是的，这就是我的意思。首先将它们保存在数据属性中。

由v-model自动完成，您无需再做任何事情

【参考方案1】：

如果您正在寻找基于 ajax 的解决方案，请考虑使用名为“axios”的库。它允许您使用 url 发布/获取数据，就像 jquery 的 get 和 post 方法一样。

要使用 axios，您需要先使用 npm npm install axios --save 安装 axios，然后使用 import axios from axios 导入它并在提交时使用它。新代码如下所示：

<main>
    <form @submit.prevent="submit">
        <input type="text" v-model="name"> 
         <button type="submit">
            Submit From Vue Property
        </button>
    </form>
</main>


new Vue(
   el : 'main',
   data : 
       name : ''
   ,
   methods : 
      submit()
          axios.post('/your-url', name: this.name)
          .then(res => 
              // do something with res
          )
          .catch(err => // catch error);
      
   
)

【讨论】：

所以不在按钮中，而是在表单标签中？

感谢您的帮助。但是，如果我不使用 ajax，我现在可以怎么做？

是的，如果你不这样做，那么点击时表单的默认行为将启动，页面将刷新

如果你不使用 ajax 那么就没有使用 vuejs 的意义，你需要做的就是给输入一个名字，然后把方法和动作属性放在表单标签上

是的，你可以这样做，Vue 是一个渐进式框架，你甚至可以像使用 jQuery 一样使用它。使用 cdn 包含 Vue 并初始化 vueapp 并编写您自己的自动完成逻辑，如果任何其他自动完成库可通过 cdn 获得，您甚至可以使用它。

【参考方案2】：

这里你可以使用vue变量提交总的formdata。你可以使用axios制作api。

<template>
  <div>
    <form @submit.prevent="submitform">
       <input type="text" v-model="formdata.firstname"> 
       <input type="text" v-model="formdata.lastname"> 
       <input type="text" v-model="formdata.email"> 
       <input type="text" v-model="formdata.password"> 
       <button type="submit">
         Submitform
       </button>
    </form>
  </div>
</template>

<script>

import axios from 'axios'

export default 
  name: 'el',
  data () 
    return 
       formdata: firstname: '', lastname: '', email: '', password: '' 
       // this is formdata object to store form values
    
  ,
  methods: 
    submitform()
      axios.post('/url',  this.formdata )
      .then(res => 
         // response
      )
      .catch(err =>  
         // error 
      )
  ,
  mounted () 

  ,
  components: 

  

</script>