vue中model已經綁定，但頁面沒有顯示內容

舉一個常見例子比如聯動的下拉框（先選擇城市，然後獲取當前城市區域的數據，可是會遇到的問題是當點擊區域的時候，頁面不顯示，但model綁定的值已經得到）

城市(下拉框)---區域(下拉框)

  <div>
    <el-select v-model="form.city" clearable placeholder="請選擇城市" @change="getArea()" @clear="clearSelect">
      <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="form.area" clearable placeholder="請選擇區域">
      <el-option v-for="item in areaData" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>

原因分析：

大家都明白vue是數據驅動，當數據發生改變的時候，視圖也會發生改變。但是VUE有時候受到一些限制，會無法檢測到數據的修改，完成不了數據響應所以不能自動刷新。

關於數據驅動，數據響應瞭解地址

解決方案一：（不推薦：當跟蹤響應數據之後還是沒辦法，最後迫不得已的時候使用--一般只有0.01%的可能性會用到）

既然是無法自動刷新，那麼我們手動強制刷新一次

   this.$forceUpdate(); // 進行視圖層重新渲染

解決方案二：(推薦)

使用Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性

官網直通車：檢測數據變化以及跟蹤