首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue select选中默认值

vue日志之如何用select选中默认值

2022-05-31 10:12:52 作者：婷叽

这篇文章主要介绍了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其实并没有太大的区别，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请求

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。