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

Posted on by

如何用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其實並沒有太大的區別，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)一下，會發現它是空數組，有人說我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請求

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：