vue form表單的input不能輸入

代碼：

<template> 
      <el-form :model="formData" ref="formData" label-width="200px">
        <el-form-item v-for="item in tableColumnsFields" :label="item.columnNameCn" :key="item.id" :prop="item.columnNameEn" >
          <el-select v-if="item.mapDicts===1" v-model="formData[item.columnNameEn]" style="width:100%">
            <el-option v-for="option in item.dicts"
                :label="option.dictKey"
                :value="option.dictValue"></el-option>
          </el-select>
          <el-input v-else v-model="formData[item.columnNameEn]" style="width:100%"></el-input>
        </el-form-item>
      </el-form>
</template>
<script>
import * as api from '@/api/dataset-api.js'
export default {
  components:{
  },
  data(){
    return{
      api,
      formData:{},
      tableColumnsFields:[],
    }
  },
  created(){
    this.getTableColumns()
  },
  mounted(){
  },
  methods:{
    getTableColumns(){
      const id = this.$route.query.id
      this.api.getColumnInfoByTableId(id).then(res=>{
        if(res.retcode === "000000"){
          const {bizdata} = res
          this.tableColumnsFields = bizdata
          this.tableColumns = bizdata.map(item=>{
            this.formData[item.columnNameEn]='' //新增formData
          })
          })
        }else{
          console.log('報錯')
        }
      })
    }, 
  },
}
</script>

使用 this.formData[item.columnNameEn]='' //新增formData 會導致輸入框和選擇框都用不了，

正確的寫法是：

const formFiels = {}

this.tableColumns = bizdata.map(item=>{

formFiels[item.columnNameEn]=''

}

this.formData = formFiels //一次性賦值

這樣就可以了！

根本原因我還沒參透，希望廣大網友能解答一下。