如下示例:
```html
<a-form layout="vertical">
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="名称">
<a-input v-model="helloForm.name" placeholder="请输入名称"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="描述">
<a-input v-model="helloForm.description" placeholder="请输入描述"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
```
```javascript
export default {
name: 'helloFormDemo',
data () {
return {
helloForm: {}
}
},
methods: {
handleEditHelloForm () {
// 模拟编辑功能需要数据回显
this.helloForm.name = 'hello 我是helloForm中的name值'
this.helloForm.description = '我是一大段描述,此处省略很多字'
}
}
}
```
如此这样,表单虽然值回显的但是确实无法修改`input`框中的值的。
> 根据官方文档定义:**如果在实例创建之后添加新的属性到实例上,它不会触发视图更新**
由此`Vue`实例创建时,`helloForm.属性名`并未声明,因此`Vue`就无法对属性执行 `getter/setter` 转化过程,导致`helloForm`属性不是响应式的,因此无法触发视图更新。解决的方式有两种,第一种就是显示的声明`helloForm`这个对象的属性,如:
```javascript
export default {
name: 'helloFormDemo',
data () {
return {
helloForm: {
name: '',
description: ''
}
}
}
}
```
其次也可以使用使用`Vue`的全局`API`: `$set()`赋值:
```javascript
export default {
methods: {
handleEditHelloForm () {
// 模拟编辑功能需要数据回显
this.$set(this.helloForm, 'name', '我是name')
this.$set(this.helloForm, 'description', '我是一大段描述,此处省略很多字')
}
}
}
```

Vue中input框手动赋值成功却无法在编辑input框的值??