色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue get form

錢良釵2年前9瀏覽0評論

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屬性來控制是否顯示返回的數據。