<template> <div><textarea v-model='content'></textarea><br/><input type='button' @click='submit' value='留言' /> </div> </template><script> export default {data () {return {content: ''}},methods: {submit: function () {this.$http.post('/api/interface/blogs/add_comment',{content: this.content}).then((response) => {alert('提交成功!, 剛才提交的內容是: ' + response.body.content)},(response) => {alert('出錯了')})}} } </script>

效果如下:

說明: (1) 下面的代碼是帶輸入的表單項 <textarea v-model='content'> </textarea>(2) 下面的代碼則是按鈕被單擊后觸發提交表單的函數submit <input type='button' @click='submit' value='留言' />(3) 下面的代碼定義了提交表單的函數submit submit: function () {this.$http.post('/api/interface/blogs/add_comment',{content: this.content}).then((response) => {alert('提交成功!, 剛才提交的內容是: ' + response.body.content)},(response) => {alert('出錯了')}) }

參考 《Vue.js快速入門》 P102~P104

總結

以上是生活随笔為你收集整理的vue --- 提交表单到服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。