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

就是这些。