vue select 動態綁定下拉框-設置默認值

一、拿到數據進行遍歷，加載到下拉框中,v-text取代{{}}防止延遲數據渲染問題

<select id="totalYear" class="yearSel" v-model="yearSelectedTotal" v-on:change="getTotalFeeByType">
                <option :value="item.Id" v-for="item in yearOnlineList" v-text="item.Name"></option>
</select>

 

二、Vue中的Data()以及Created()聲明存放數據的容器

data() {
            return {
                yearOnlineList: [],
                yearSelectedTotal: '',
            }
        },
        created() { // 這里相當於文檔准備就緒函數,用來初始化數據
            this.getYearOnline();
            this.yearSelectedTotal = new Date().getFullYear();
        },

 

三、動態獲取后台數據

methods: { // 方法
            async getYearOnline() {// 獲取系統上線年份
                await axios.get('/StatisticsIndicator/GetYearOfSysOnline')
                    .then(response => {
                        this.yearOnlineList = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
                }
            }

四、Controller中處理數據

　　　　　/// <summary>
        /// 獲取系統上線年份
        /// </summary>
        /// <returns></returns>
        public ActionResult GetYearOfSysOnline()
        {
　　　　　　　//這里是動態獲取系統上線年份
            var onlineYear = hbiApp.GetYearOfSysOnline();
            var currYear = DateTime.Now.Year;
            List<HtmlSelectDto<int>> selList = new List<HtmlSelectDto<int>>() {
                 new HtmlSelectDto<int> {
                        Id=0,
                        Name="全部"
                    }
            };
            for (int i = onlineYear; i <= currYear; i++)
            {
                HtmlSelectDto<int> selectDto = new HtmlSelectDto<int>();
                selectDto.Id = i;
                selectDto.Name = i + "年";
                selList.Add(selectDto);
            }

            return Json(new { data=selList},JsonRequestBehavior.AllowGet);
        }

五、封裝下拉框數據模型

 public  class HtmlSelectDto<T>
    {
        public T Id { get; set; }
        public string Name { get; set; }
    }