使用onValuesChange从ant-design vue表单获取异步值
使用onValuesChange从ant-design vue表单获取异步值
提问于 2021-07-07 20:42:04
我有一个使用ant-design-vue提交和发送数据到后端的表单。然而，我想要实现的是给用户提供某种形式的反馈，这样当他们在字段中输入时，他们会看到值{fullname placeholder}立即更新，然后单击submit按钮将其发送到后端。
{{ fullname || 'Your Name' }}
<a-col :xs="{ span: 24 }" :lg="{ span: 12 }">
<a-form-item label="Full Name">
<a-input
type="text"
placeholder="Your Name"
:disabled="toggleEdit === 'edit'"
v-decorator="[
'fullname',
{
initialValue: this.fullname || '',
rules: [{ required: true, message: 'Name is required!' }],
},
]"
autocomplete="name"
/> </a-form-item
></a-col>因此，顶部的{{ fullname }}会立即更新用户输入的内容，类似于v-model。但我想知道如何使用onValuesChange方法在ant-design-vue形式中实现这一点。
回答 1
Stack Overflow用户
发布于 2021-07-08 09:41:26
您需要先使用v-model在input上绑定您的值。同时，通过submit方法在按钮上使用@click
<a-input
type="text"
v-model="inputValue" <---here
placeholder="Your Name"
:disabled="toggleEdit === 'edit'"
v-decorator="['fullname',
{
initialValue: this.fullname || '',
rules: [{ required: true, message: 'Name is required!' }],
},
]"
autocomplete="name"/>
<button @click="submit"></button>
...
data(){
return{
inputValue: ""
}
}
methods:{
submit(){
// I send keyword with a object which include this inputValue by POST method
// you can change it to yours, and keyword as well
fetch("api-url").post({ keyword: this.inputValue })
.then(response.json())
.then(res => { //dosomthing when you get res from back-end })
}
}上面的代码是你的要求吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68286299
复制相关文章
相似问题
腾讯云开发者
