v-for绑定v-model

原html

<form ref="form" @submit.stop.prevent="handleSubmit">
   <b-form-group
        v-for="(item, index) in addTaskForm"
        :key="index"
    >
        <b-form-input
            :id="item.id"
			v-model="item.vModel"
            required
            :state="item.state"
        ></b-form-input>

    </b-form-group>
</form>

原定义的数据形式

addTask:{
    gameName: "",
    resume: "",
    details: "",
    reason: '',
    fixed: ''
},

addTaskForm:  [
 {
     'state': "gameNameState",
     'id': "gameName-input",
     "vModel": "addTask.gameName",
 },
 {
     'state': "resumeState",
     'id': "resume-input",
     "vModel": "addTask.resume",
 },
]

此时浏览器会报错 addTask.gameName is undefined
需改为以下方式

<form ref="form" @submit.stop.prevent="handleSubmit">
   <b-form-group
        v-for="(item, index) in addTaskForm"
        :key="index"
    >
        <b-form-input
            :id="item.id"
            v-model="addTask[item.vModel]"
            required
            :state="item.state"
        ></b-form-input>

    </b-form-group>
</form>

addTask:{
    gameName: "",
    resume: "",
    details: "",
    reason: '',
    fixed: ''
},

addTaskForm:  [
 {
     'state': "gameNameState",
     'id': "gameName-input",
     "vModel": "gameName",
 },
 {
     'state': "resumeState",
     'id': "resume-input",
     "vModel": "resume",
 },
]

当需要绑定的变量名本来不是对象的属性时，需要转为对象的属性名，
原理比较简单，就是在JS中对象，获取属性值时使用的方法不同造成的结果，
如果是使用`对象.属性名`的方式来获取的话，属性名是不能为变量的；
但是使用`对象[属性名]`这种方式时，属性名就可以为变量。