使用 onValuesChange 从 ant-design vue 表单获取异步值

Question

我有一个使用 ant-design-vue 提交数据并将数据发送到后端的表单。但是，我想要实现的是给用户某种形式的反馈，这样当他们在字段中输入时，他们会看到值 {fullname placeholder} 立即更新，然后单击提交按钮将其发送到后端。

{{ 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 形式实现这一点。

Answer 1

您需要首先使用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 })
}
}

上面的代码是你的要求吗？