Vue的get form方法能夠幫助我們向后端發送Ajax請求,從而獲取數據并渲染到前端頁面上。具體使用方法可以參考如下代碼:
<template> <div> <form @submit.prevent="handleSubmit"> <input type="text" v-model="formData.name"/> <button type="submit">Submit</button> </form> <div v-if="submitted"> <p>Name: {{ response.name }}</p> <p>Age: {{ response.age }}</p> </div> </div> </template> <script> export default { data() { return { formData: { name: '' }, response: {}, submitted: false } }, methods: { async handleSubmit() { try { const res = await this.$http.get('/api/user', { params: { name: this.formData.name } }) this.response = res.data this.submitted = true } catch (error) { console.error(error) } } } } </script>
上面的代碼中,我們首先在模板中定義了一個表單,其中包括一個文本輸入框和一個提交按鈕,并綁定了一個handleSubmit方法。在data選項中,我們定義了formData、response和submitted三個屬性。其中formData用來存儲輸入框中的內容,response用來存儲后端返回的數據,submitted則用來判斷是否已經提交過表單。
在handleSubmit方法中,我們使用了Vue提供的$http方法,向后端發送了一個get請求,并傳遞了一個params參數,里面包含了我們輸入框中的內容。如果請求成功,我們就將返回的數據存儲到response屬性當中,并將submitted屬性設置為true,這樣就可以在模板中根據submitted屬性來控制是否顯示返回的數據。
下一篇go構建json