关于Element-ui的多选框，单选框无法选中的问题

最近先放一下物联网的事情，打算开发一个前端的SPA。
类似于问卷星的一个东西，因为现在大学，填表的需求很高，可是却没有合适的软件，打算自己做个网站。

---

前端就选择用Vue和Element-UI开发了，可是在使用的过程中出现了很多错误，浪费了很长时间，也让我对Javascript有了更深的了解。

---

• 错误1

  对‘this’的理解不深刻：

data() {      return {        clientWidth: 0,      }    },    mounted() {      this.clientWidth = document.documentElement.clientWidth      const that = this      window.onresize = function temp() {        that.clientWidth = document.documentElement.clientWidth      }    }

这段代码用来计算界面宽度，而且是响应式的，但是刚开始没有那句const that = this，然而JavaScript中函数，是一个对象，对象中的this，已经不是外面的this了，所以没法改变data中的数值。

错误2

ajax获取远程数据，初始化视图。

错误代码：

 this.axios.get(this.$url+'/table?id='+this.$route.query.id,{      }).then(res => {        console.log('服务器回复'+JSON.stringify(res.data))        that.FormData=res.data.slice(0)        }      }, err => {      }) var index        for(index in that.FormData){          if(that.FormData[index].type=='input'){            that.i++            that.Form['input'+this.i]=''          }else if(that.FormData[index].type=='radio'){            that.i++            that.Form['radio'+this.i]=''          }else if(that.FormData[index].type=='checkBox'){            that.i++            that.Form['checkBox'+this.i]=[]          }          that.Form['id']=that.FormData[0]['id']          console.log('Form内容'+JSON.stringify(that.Form))

这里不仅有上文提到的that和this的问题，还有一个更致命的问题，axios.js是一个事件驱动型的Ajax库，所以程序的执行，并不是顺序的，所以应该把for循环放到then(res => {})内部执行。

错误3

单选框，多选框无法选定，我猜这个应该是Element-ui的BUG，因为Vue无法检测到数组元素的改变，所以，导致视图层没有变化，所以要加一些代码。

错误代码：

<el-checkbox-group v-else-if="data.type=='checkBox'" v-model="Form['checkBox'+index]" :max="data.max==0?100000:data.max" :min="data.min"> <el-checkbox v-for="(choice,index3) in data.choices" :key="index3" :label="choice" :checked="checked" @change="checked=!checked"></el-checkbox>                  </el-checkbox-group>

可以看到我监听了@change和checked的值，进行了修改。

就是这些。