关于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的值，进行了修改。

就是这些。