vue日志之如何用select選中默認值

更新時間：2022年05月31日 10:15:28 作者：婷嘰

這篇文章主要介紹了vue日志之如何select選中默認值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何用select選中默認值

在寫這個問題之前也查閱了網上很多種答案，下面我來說一下幾種不可行的方式以及可行的方式。

干貨來了。

先貼一下view和model

? ? ?<div class="item">
? ? ? ? <p class="top">
? ? ? ? ? <span>推廣物：</span>
? ? ? ? ? <select v-model="detail.aid">
? ? ? ? ? ? <option :value="item.id" v-for="item in accountList" :key="item.id">{{item.name}}</option>
? ? ? ? ? </select>
? ? ? ? </p>
? ? ? ? <h6 class="bottom">選擇推廣任務的公眾號</h6>
? ? ? </div>

? data() {
? ? return {
? ? ? detail: {
? ? ? ? aid: 0,
? ? ? },
? ? ? accountList: [],
? ? ? ...
? ? };
? },
?
? methods: {
? ? getAccountList() {
? ? ? //獲取公眾號
? ? ? this.$fetch(`/popularize/account/list/2`).then(response => {
? ? ? ? if (response.errorCode == 0) {
? ? ? ? ? let data = response.data;
? ? ? ? ? this.accountList = data;
? ? ? ? }
? ? ? });
? ? },
? }

先說下網上的第1種

? mounted() {
? ? ...
? ? this.getAccountList();
? ? document.getElementsByTagName('select').selectIndex = 0
? ? // console.log('sid',document.getElementsByTagName('select').selectIndex )
? },

這種方式只操作了dom,沒有操作數據，selectIndex是可以打印出來的。但是在vue中并沒有作用。

第2種

? created () {
? ? // select初始化
?
? ? this.detail.aid = this.accountList[0].id; //默認選中第一項
?
? },

有人把這個id初始化放在mounted, 也有人放在created其實并沒有太大的區(qū)別，created時就可以獲取的到后端傳來的數據了。所以這里你created和mounted一樣的。那么這個時候就會報一個錯：

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'id' of undefined"

found in ...

這個時候大家就會迷茫，為什么id會變成undefined呢，這里的id是指detail還是accountList里的id，那么我們去看data里面是否有定義，沒有就給他初始化一下，當然，你以為這個時候好了，其實并沒有。為什么呢，因為你console.log(this.accountList)一下，會發(fā)現它是空數組，有人說我mounted里面已經調用this.getAccountList( )方法了，然后在下面在寫一個this.detail.aid = this.accountList[0].id;就好了。

其實不是的，當你獲取這個方法的時候，頁面只能做一件事，就是獲取這個列表，并不能同時把id賦值給列表的某項。所以這個時候我們需要做的是，請求這個接口時就賦值，在created或者mounted里初始化，那么我們來改造一下這段代碼：

? mounted() {
? ? // select初始化
? ? this.$fetch(`/popularize/account/list/2`).then(response => {
? ? ? if (response.errorCode == 0) {
? ? ? ? let data = response.data;
? ? ? ? this.accountList = data;
? ? ? ? this.detail.aid = this.accountList[0].id; //默認選中第一項 初始化
? ? ? }
? ? });
? },

上面我們說過了從后臺拿到的數據給他賦值，如果是我們自己定義的數據呢，那就更簡單了。接下來

第3種，先貼自定義數據

? ? ? ? <p class="top">
? ? ? ? ? <span>廣告限量模式：</span>
? ? ? ? ? <select v-model="detail.mode">
? ? ? ? ? ? <option :value="0">全選</option>
? ? ? ? ? ? <option :value="1">每日限量廣告</option>
? ? ? ? ? ? <option :value="2">不限量廣告</option>
? ? ? ? ? </select>
? ? ? ? </p>

這個時候我們把后端綁定的字段mode的值設置為第一項的option的value就行，在data中初始化就可以了。

? data() {
? ? return {
? ? ? detail: {
? ? ? ? ...
? ? ? ? aid: 0,
? ? ? ? mode: 0,
? ? ? },
? }

到此已寫清了從前端和后端怎樣設置第一項為默認值。

vue select js 設置默認值

這個地方我是用vue進行渲染的select

對于每個選項如下

<div id="companylist">
    <label>所屬公司</label> 
      <select class="form-control" id="companyid" v-model="couponSelected" @change='getCompanyId($event)'>
		<option v-for="(item,index) in data" v-bind:value=item.id>{{item.companyname}} 
        </option>
	  </select>
</div>

execFunc("company.getcompanylist", {}, function(result) {
		var vucom = new Vue({
			el : '#companylist',
			data : {
				data : []
			},
			created(){
               //默認值渲染必須
	           this.couponSelected = hcompanyid;
	        },
			methods : {
				getCompanyId : function(event) {
					$("#companyid").val(event.target.value);
				}
			}
		});
		vucom.data = result.data;
	})

execFunc是我自己封裝的一個ajax請求

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: