最近先放一下物聯網的事情，打算開發一個前端的SPA。
類似於問卷星的一個東西，因為現在大學，填表的需求很高，可是卻沒有合適的軟體，打算自己做個網站。

• 錯誤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的值，進行了修改。

就是這些。