广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue日志之如何用select选中默认值
  • 421
分享到

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

2024-04-02 19:04:59 421人浏览 薄情痞子
摘要

目录如何用select选中默认值先说下网上的第1种第2种第3种,先贴自定义数据Vue select js 设置默认值对于每个选项如下如何用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请求

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

--结束END--

本文标题: vue日志之如何用select选中默认值

本文链接: https://www.lsjlt.com/news/150222.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue日志之如何用select选中默认值
    目录如何用select选中默认值先说下网上的第1种第2种第3种,先贴自定义数据vue select js 设置默认值对于每个选项如下如何用select选中默认值 在写这个问题之前也查...
    99+
    2022-11-13
  • AngularJS中如何实现select加载数据选中默认值
    这篇文章给大家分享的是有关AngularJS中如何实现select加载数据选中默认值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。问题描述:在我们开发项目过程中,避免不了会用到s...
    99+
    2022-10-19
  • select标签如何设置默认选中
    这篇文章主要为大家展示了“select标签如何设置默认选中”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“select标签如何设置默认选中”这篇文章吧。方法有两种...
    99+
    2022-10-19
  • html如何设置select默认不选中
    这篇文章给大家分享的是有关html如何设置select默认不选中的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 设置方法:1、在select标签内的第...
    99+
    2022-10-19
  • 如何根据后台返回的值来select下拉框默认选中值
    这篇文章主要介绍了如何根据后台返回的值来select下拉框默认选中值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。感谢你能够认真阅读完这篇文...
    99+
    2022-10-19
  • express中如何使用morgan默认日志组件
    本篇文章为大家展示了express中如何使用morgan默认日志组件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。首先,初始化项目。npm install...
    99+
    2022-10-19
  • vue中select二级联动第二级默认选中第一个option值的示例分析
    这篇文章主要介绍vue中select二级联动第二级默认选中第一个option值的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!当二级联动比如选择国家的时候,希望选中一个国家的...
    99+
    2022-10-19
  • vue日期设置范围有默认值不生效如何解决
    这篇文章主要介绍了vue日期设置范围有默认值不生效如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue日期设置范围有默认值不生效如何解决文章都会有所收获,下面我们一起来看看吧。一、问题描述在 Vue.j...
    99+
    2023-07-06
  • javascript中如何设置和使用默认值
    本篇内容主要讲解“javascript中如何设置和使用默认值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中如何设置和使用默认值”吧!设置默认值在过去,为了设置函数参数的默认...
    99+
    2023-07-06
  • 如何在SASS 中使用变量的默认值
    今天就跟大家聊聊有关如何在SASS 中使用变量的默认值,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。SASS 中定义的变量,后设置的值会覆盖旧的值。$color: red;...
    99+
    2023-06-08
  • vue中v-for循环复选框如何实现默认勾选第一个
    这篇文章主要为大家展示了“vue中v-for循环复选框如何实现默认勾选第一个”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中v-for循环复选框如何实现默...
    99+
    2022-10-19
  • python如何在函数声明中使用默认值
    小编给大家分享一下python如何在函数声明中使用默认值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在函数声明中使用默认值在几乎所有的Python项目中,大多数...
    99+
    2023-06-27
  • 如何让html的下拉菜单提交后保留选中值不返回默认值
    本篇内容主要讲解“如何让html的下拉菜单提交后保留选中值不返回默认值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何让html的下拉菜单提交后保留选中值不返...
    99+
    2022-10-19
  • 如何解决vue-router 二级导航默认选中某一选项的问题
    这篇文章主要介绍如何解决vue-router 二级导航默认选中某一选项的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!现在有一个需求是这样的:这个需求很正常吧! 二级导航条,不是...
    99+
    2022-10-19
  • 如何解决Vue下拉框回显并默认选中随机问题
    这篇文章主要为大家展示了“如何解决Vue下拉框回显并默认选中随机问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决Vue下拉框回显并默认选中随机问题”这...
    99+
    2022-10-19
  • Vue如何用Router去掉url中默认的锚点
    这篇文章主要介绍“Vue如何用Router去掉url中默认的锚点”,在日常操作中,相信很多人在Vue如何用Router去掉url中默认的锚点问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue如何用Route...
    99+
    2023-07-04
  • 如何解决vue-cli 默认路由再子路由选中下的选中状态问题
    小编给大家分享一下如何解决vue-cli 默认路由再子路由选中下的选中状态问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue-cli是Vue.js官方脚手架命令行工具,我们可以用它快...
    99+
    2022-10-19
  • 如何使用原生JS获取select元素选中的value和text值
    本篇内容主要讲解“如何使用原生JS获取select元素选中的value和text值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用原生JS获取select元素选中的value和text值”...
    99+
    2023-06-29
  • phpwind发帖 自动分析url|使用签名如何默认不选中
    关键字描述:签名 如何 默认 使用 发帖 自动 分析 " < checked 怎样才能在发帖的时候,自动分析url|使用签名 这两项是默认不选中呢?post.htm这个文件:<span><input...
    99+
    2022-06-12
    签名 如何 默认 使用 发帖 自动 分析 " < checked
  • 如何在Ubuntu中设定默认启动内核 (适用于GRUB 2.0及之后的版本)
    当需要指定Ubuntu操作系统启动的不同内核版本时,这可能会变得有点棘手。因此,在这篇文章中,我们将探讨一些实用的方法,以便指定Ubuntu操作系统所需的内核版本。 安装内核的步骤非常简单,我们...
    99+
    2023-09-05
    ubuntu linux 服务器
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作