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

目录
  • 如何用select选中默认值
    • 先说下网上的第1种
    • 第2种
    • 第3种,先贴自定义数据
  • vue select js 设置默认值
    • 对于每个选项如下

如何用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请求

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • element-ui中的select下拉列表设置默认值方法

    element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu

  • vue select二级联动第二级默认选中第一个option值的实例

    当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine"> <span>所在区域</span> <select name="" v-model="countryName" @change="selectCountry"> <option :value=

  • vue.js 解决v-model让select默认选中不生效的问题

    笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下. 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题.js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义的data里面.并且前端页面除了select不能正常选中,其他的input 框的数据也都全部显示出来了(因为涉及一些机密的

  • vue 实现单选框设置默认选中值

    vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <li v-for="(value,i) in addList" :key="value.id"> <input class="radio" type="radio" name="radios" :value="i" v-mod

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

    目录 如何用select选中默认值 先说下网上的第1种 第2种 第3种,先贴自定义数据 vue select js 设置默认值 对于每个选项如下 如何用select选中默认值 在写这个问题之前也查阅了网上很多种答案,下面我来说一下几种不可行的方式以及可行的方式. 干货来了. 先贴一下view和model      <div class="item">         <p class="top">           <span>

  • layer插件select选中默认值的方法

    再次更改代码的时候,因为城市下拉列表是从数据库查出来的,所以这时候就想到了一起以前用到的一个方法:select重新渲染 就是把未渲染的元素该怎么设置值还怎么设置值,然后把layer渲染出来的页面样式,从新再渲染一次, ,, 示例: [layui渲染文档](http://www.layui.com/doc/modules/form.html#render) $("#userName).val("小明"); ... $("#city").val("天

  • 解决vue 更改计算属性后select选中值不更改的问题

    先上代码: //... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}</span>

  • AngularJS select加载数据选中默认值的方法

    问题描述: 在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配.代码如下: //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id&q

  • AngularJS select设置默认值的实现方法

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-app="noteApp" ng-controller="noteCtrl"> <head> <meta http-equiv="keywords" content="keyword1,keyword2,keyword

  • jquery根据name取得select选中的值实例(超简单)

    实例如下所示: <select name="region[province]" id="" class="region valid"> <option value="0" selected="selected" tier="1">省.直辖市</option> <option tier="1" value="2&quo

  • Vue props中Object和Array设置默认值操作

    我就废话不多说,看代码吧~ seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { return {} } } 当父组件没有传这个值或者值是空时,输出的话,返回: 下面这种是错误的 seller: { type: Object, default: () => {} } 当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template

  • IE8下Jquery获取select选中的值post到后台报错问题

    我们一般使用jquery获取select时,一般这么用: <select id='a'> <option selected='selected' value='1'> </select> var selectedValue = $("#a").val(); 在非IE8下,selectedValue的值为"1",typeof selectedValue 为"string". 在IE8下,selectedValue

  • Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[tex

随机推荐