如下示例：
```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框的值？？