【Vue】【Element】下拉框中沒有賦默認值,爲何頁面加載後,下拉框內的值爲0?

一、問題

1.1、環境
電腦環境：Windows 10；
開發工具：IntelliJ IDEA；
數據庫環境：Redis 3.2.100
JDK環境: Jdk1.8；

1.2、問題
Vue.js和Element框架的前端,沒有設置默認值,爲什麼下拉框默認值總是爲0?

二、解答

2.1 前端的element框架的html代碼:

                <el-form-item label="倉庫" prop="storeId">
                  <el-select v-model="operateDataForm.storeId" @change="selectMerchant"  placeholder="請選擇" clearable >
                    <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>

2.2 前端的vue框架的js代碼:
① data(){}數據初始化區域的默認值:

data(){
	return {
		storeList: [],
		operateDataForm: {
          storeId: '',//這裏初始值爲null和'',或者註釋調這一行,下拉框初始值都是0,很奇怪;
        }
	}
}

② methods:{}方法區,獲取storeList集合的方法:

      getMStoreList() {
        let this_ = this;
        this.utils.request.getMStoreList({}, function (res) {
          if (res.code === "0000") {
            this_.storeList = res.data;
          } else {
            this_.$message({message: "操作失敗, " + data.msg, type: "error"});
          }
        });
      },

明明沒有任何地方設置下拉框的默認值爲0,爲何一進入頁面,下拉框裏總有一個0呢?
通過觀察,我們可以發現,頁面加載完後,有一瞬間,下拉框中是沒有值得,然後下拉框裏閃了一下,0就出現了,這說明,下拉框中的值,很可能是後來賦值造成的;

我們在getMStoreList()方法開頭打一個debugger;看阻攔了方法調用後,下拉框中的默認值是否爲0;

這裏需要注意下的是,有時候,即使寫了debugger;,刷新頁面後,也不一定能進入debugger,我們可以再寫一個alert(1);方法來強制瀏覽器被debugger斷點阻攔,原因未知;

打了斷點之後發現,初始化頁面數據是,mounted方法裏,總共有4個方法,而第1個方法是查詢詳情的方法,在這個方法裏,調用後端接口後,沒有查詢到對象,因爲我們是從列表跳到詳情頁面,然後接口給返回值是new 了一個對象,雖然new 的這個對象的類型都是封裝類型,即Long值,Integer值都是null,但是傳送到前端後,Long類型的null值被賦予了0,所以初始值都變成了0;

完畢~

三、總結

歡迎關注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公衆號：幕橋社區

知乎：張牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
簡書： https://www.jianshu.com/u/02c0096cbfd3