VUE提交按钮数据

假设我有这个代码VUE提交按钮数据

<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的数据属性，而不是？）

来源

2017-07-30 codeComic

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

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

你想在哪里保存它们。他们被绑定到你在数据属性中初始化的属性，因为你正在使用'v-model' –

如果你正在寻找一个基于AJAX的解决方案，可以考虑使用一个名为“axios”库。它可以让你使用urls发布/获取数据，就像jquery的get和post方法一样。

要使用axios，您需要先使用npm安装axios，npm install axios --save，使用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}); 
     } 
    } 
})

来源

2017-07-30 09:15:25

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

感谢您的帮助。但我现在可以如何，如果我不使用AJAX？ – codeComic

是啊，如果你不这样做，然后点击表单的默认行为将踢，页面将刷新 –

VUE提交按钮数据

回答

相关问题