vue+elemenUI——select下拉框初始化問題：數據已有，但不回顯

參考：https://blog.csdn.net/qq_43779703/article/details/100693565

　　   https://blog.csdn.net/xuaner8786/article/details/81217075

          https://blog.csdn.net/qq_31324879/article/details/101775469

 

我的情況：下拉框數據根據后台返回的數據進行初始化，但一直無數據，控制台打印發現數據是有的，但不回顯

 

頁面：

<el-select  v-model="num" placeholder="選擇數量"         
    @change="numChange"
    @visible-change="numTrigger">
    <el-option
       v-for="item in options_num"
            :key="item"
            :label="item"
            :value="item">
    </el-option>
</el-select>

data:

data() {
      return {
        options_num: [],
        num: '',
      }
    },

獲取數據初始化:

 for (let i in res.data.list) {
     _this.options_num[i] = parseInt(i) + 1;
}

 

原因： 1. 后端傳給我的value值是Number類型的，但是el-select綁定的值num是String類型的，值的類型不匹配，所以拿到數據顯示在頁面上會出現一些小問題

　　　解決： 將data中的 num:' '改為 num:0 即可

　　     2.

　　　　數組的響應式方法：

　　　　 　　vue 將被偵聽的數組的變異方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：

　　　　　　　　push()、pop()、shift()、unshift()、splice()、sort()、reverse()

　　　　數組的非響應式方法:　　

　　　　　　　　由於 JavaScript 的限制，Vue 不能檢測以下數組的變動：　　　　　　

　　　　　　　　(1). 當利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue，（就是我現在的方法，其實改用push就好）

　　　　　　　　(2). 當修改數組的長度時，例如：vm.items.length = newLength

　　　　　　　　針對(1)可用  this.set(object, key, value)方法將響應屬性添加到嵌套的對象上.實現改變數據自動渲染，如下：　 

 for (let i in res.data.list) {
      _this.$set(_this.options_num, i, parseInt(i) + 1);
}

             　　　      或者在初始化后添加一句：this.$forceUpdate() 強制刷新

　　　　　　　　

　　　　　　　　針對(2)可用splice