vue里面的el-select绑定默认值方式

目录
  • vue的el-select绑定默认值
  • el-select绑定的值无法选中el-option问题

vue的el-select绑定默认值

vue select下拉框绑定默认值：

首先option要加value值，以便v-model可以获取到对应选择的值

一、当没有绑定v-model，直接给对应的option加selected属性

二、当给select绑定了v-model的值的时候，要给v-model绑定的data值里写默认值

el-select绑定的值无法选中el-option问题

框架vue-element-ui中的select绑定值v-model无法自动选中option的问题

代码如下：

<template>
 <el-select v-model="formData.colorId" placeholder="选择">
   <el-option
     v-for="item in colorOptions"
     :key="item.id"
     :label="item.name"
     :value="item.id">
   </el-option>
 </el-select>
<template>
<script>
colors = {
 "1": "黄",
 "2": "红",
 "3": "绿"
}
export default {
  data() {
      return {
          formData:{ colorId: 2 },
          colorOptions: obj2Array(colors)
    }
  }
}
function obj2Array(obj){
  const arr = []
  for(let key in obj){
    arr.push({id:key, name: obj[key]})
  }
  return arr
}
</script>

发现无法自动选中红色，而是直接显示2，这是什么问题呢。

原来是obj2Array这个方法的问题，在重构为数组时，key是字符直接给到id，而colorId是数值，所以无法匹配。

正解：

function obj2Array(obj){
  const arr = []
  for(let key in obj){
    arr.push({id:Number(key), name: obj[key]})
  }
  return arr
}

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

赞 (0)

相关推荐

  • vue中的select绑定多个值

    目录 vue select绑定多个值 vue el-select 绑定id值 vue select绑定多个值 不再通过v-model和value进行绑定 而是通过绑定索引值Index 然后通过定义@input=change方法,通过索引值获取并更新想要绑定的多个值 <el-select v-model="basic_info.itemindex" placeholder=""  @input="change">     <el-

  • Vue select 绑定动态变量的实例讲解

    概述 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定.所以通过数据的id或者下标进行变量拼接.页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code <div v-for="(item, index) in tagAllDate" :key="index"> <el-form-item :label="item.name"> <el-sel

  • vue关于select组件绑定的值为数字类型的问题

    目录 select组件绑定的值为数字类型问题 number可以将绑定的 v-model 改为 number类型 若元素属性需要绑定的值为数字时的处理 1.如果直接这样写 2.解决 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以. 如下所示: number可以将绑定的 v-model 改为

  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    1.vue中echarts的使用 引入echarts后 let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构 var option = { //backgroundColor:"#111c4e", tooltip: { trigger: 'axis' }, legend: { //图表上方的图例显隐 data:['光合有效辐射'], textStyle: { color: '#fff' } }

  • vue select组件绑定的值为数字类型遇到的问题

    目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q

  • vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

    vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

    目录 一.问题描述 二.原因分析和解决方法 三.总结 el-select绑定对象时,回显内容始终是最后一项 一.问题描述 使用el-select组件绑定类型为对象时,回显内容始终为选项的最后一项,但是通过控制台打印的信息却是所选项. 使用代码: <template>   <div class="page-index">     <el-form       :model="ruleForm"       :rules="rul

  • vue里面的el-select绑定默认值方式

    目录 vue的el-select绑定默认值 el-select绑定的值无法选中el-option问题 vue的el-select绑定默认值 vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值 el-select绑定的值无法选中el-option问题 框架vue

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

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

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

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

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

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

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

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

  • Python 限定函数参数的类型及默认值方式

    python作为一门动态语言,在使用变量之前是不需要进行定义,而是通过动态绑定的方法将变量绑定为某种类型.这样做为我们使用变量时提供了方便,但有时也给我们使用变量时造成了一定的困扰,例如在使用变量时不知道变量的类型,使用函数时不知道该传什么类型·的参数.有时候我们定义函数时也想限定参数类型,本片博文主要就是为了解决定义函数时,如何限定参数的类型. 其实在python中限定函数的类型是很简单的,例如: def foo(text:'str',max:'int > 0' = 100,min:'int

  • django-xadmin根据当前登录用户动态设置表单字段默认值方式

    相信你一定会设置一个普通字段的默认值: class Offer(models.Model): salary = models.CharField(max_length=64, blank=True, default='6000', verbose_name='薪资待遇') 相信你还能动态设置外键字段的默认值: class Interview(models.Model): department = models.ForeignKey('departments.Department', relate

  • Spring Data JPA 设置字段默认值方式

    目录 Spring Data JPA设置字段默认值 Spring Data JPA设置字段默认值失败 Spring Data JPA设置字段默认值 在Column注解中写入以下两个属性,为什么自己查一下文档吧,即可实现字段默认值设置,并顺带解决save方法所生成的sql语句中自动填充字段为null的问题. 默认值无法更新,所以如果想在代码里修改字段默认值,你需要重新建表. @Column(insertable = false,columnDefinition = "int default 1&q

  • 使用JavaBean根据指定条件设置属性值默认值方式

    目录 JavaBean根据指定条件设置属性值默认值 使用场景 使用范围 使用示例 JavaBean对象成员变量默认值及数组默认值 JavaBean根据指定条件设置属性值默认值 使用场景 当bean数据中已经装配好其他数据,在逻辑以及数据转换完成的最后一步进行数据默认值设置:如果bean的属性较少,可以手动写if条件就行了,如果bean的属性太多,你不希望写太多if的时候,这个方法是很不错的方法: 使用范围 仅限于当前类,不能给父类设置值 也是参考了其他博主的方法,做的优化和修改,由于时间过了很长

  • Springboot @Value注入boolean设置默认值方式

    目录 @Value注入boolean设置默认值 问题描述 问题分析 解决方案 @Value 源码阅读 Spring解析@Value @Value注入boolean设置默认值 问题描述 Springboot 中读取配置文件 test: 业务代码如下 @Value("${test:true}") private boolean test; 报错如下 nested exception is org.springframework.beans.TypeMismatchException: Fa

  • vue获取或者改变vuex中的值方式

    目录 vue获取或改变vuex的值 store–>index.js 在页面中使用或者修改vuex中的值 监听vuex值变化实时改变 问题如图 思路 vue获取或改变vuex的值 store–>index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isLogin:localStorage.getItem("isLogin&

随机推荐