精华内容
下载资源
问答
  • 2021-01-12 17:05:36

    vue.js的select下拉框如何绑定事件和取值

    发布时间:2020-09-29 16:50:33

    来源:亿速云

    阅读:87

    作者:小新

    这篇文章将为大家详细讲解有关vue.js的select下拉框如何绑定事件和取值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下:

    1、绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档:

    地址:https://cn.vuejs.org/v2/api/

    :value绑定的值就是这个下拉框对应的value值

    {{send.CODE}}

    2、取值就直接获取下拉框,v-model绑定的属性就可以

    关于vue.js的select下拉框如何绑定事件和取值就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

    更多相关内容
  • 下面小编就为大家分享一篇vue.js select下拉框绑定和取值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一、今天遇到vue下拉框问题,故而写点东西留个脚印 <select v-model='selected' @click=disable()> (option,index) v-bind:value=option.value disabled=option.disabled> {{ option.text }}{{index}}{...
  • 绑定下拉框其中有两种一种是自定义,一种是数据库接口获取 一、自定义 1.下拉列表绑定 <el-col :span="10" :offset="2"> <cs-form-item :label="'计量单位'"> <cs-field-select :placeholder="'请...

    绑定下拉框其中有两种一种是自定义,一种是数据库接口获取
    一、自定义
    1.下拉列表绑定

    <el-col :span="10" :offset="2">
            <cs-form-item :label="'计量单位'">
              <cs-field-select
                :placeholder="'请选择'"
                v-model="item.Unit"
                :options="Measurement"
                @input="change"
              />
            </cs-form-item>
          </el-col>
    

    2.@input绑定改变值

     methods: {
        /* 改变值 */
        change() {
          this.$forceUpdate()
        }
      },
    

    4.绑定data item和Measurement

    data() {
        return {
          item: {},
          tenantId: this.$store.getters.tenant.TenantId,
          Measurement: Parameter.Assets.Measurement.Items,
    
        }
      },
    

    import引入组件,@表示src

    <script>
    import Parameter from '@/utils/parameters'
    
    export default {
      name: 'Insured_from',
      props: ['formData'],
      data() {
        return {
          item: {},
          tenantId: this.$store.getters.tenant.TenantId,
          CertTypeOptions: [],
          Measurement: Parameter.Assets.Measurement.Items,
          areaOption: [],
          supplierOption: []
        }
      },
      created() {
        this.getAxios('/Areas/{0}/FetchAreaOption'.format(this.tenantId)).then(res => {
          this.areaOption = res
        }),
          this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
            this.supplierOption = res
          })
      },
      methods: {
        /* 改变值 */
        change() {
          this.$forceUpdate()
        }
      },
      /* formData绑定item */
      watch: {
        formData: {
          handler(val) {
            this.item = val
          },
          immediate: true,
          deep: true
        }
      }
    }
    </script>
    

    5.根据上面代码找到文件import Parameter from ‘@/utils/parameters’
    在这里插入图片描述

    let Parameter = {}
    
    /* 公共 */  
    // Parameter.Common = {
    Parameter.Assets = {
      Status: {
        Title: '计量单位',
        Items: [
          { Value: 0, Label: '个' },
          { Value: 1, Label: '张' },
          { Value: 2, Label: '套' },
          { Value: 3, Label: '台' },
          { Value: 4, Label: '组' },
          { Value: 5, Label: '架' }
        ]
      },
      // 状态
      CertificationTypeId: {
        Title: '状态',
        Items: [
          { Value: -1, Label: '退出' },
          { Value: 0, Label: '闲置' },
          { Value: 1, Label: '在用' },
          { Value: 2, Label: '借用' },
          { Value: 3, Label: '维修中' },
          { Value: 4, Label: '境报废待审' },
          { Value: 5, Label: '调拨待审' },
          { Value: 6, Label: '处置待审' },
          { Value: 7, Label: '领用待审' },
          { Value: 8, Label: '借用待审' }
        ]
      },
      // 计量单位
      Measurement: {
        Title: '计量单位',
        Items: [
          { Value: '个' , Label: '个' },
          { Value: '张', Label: '张' },
          { Value: '套', Label: '套' },
          { Value: '台', Label: '台' },
          { Value: '组', Label: '组' },
          { Value: '架', Label: '架' }
        ]
      }
    }
    
    export default Parameter
    
    

    二、数据库绑定
    1.

     <el-col :span="10" :offset="2">
            <cs-form-item :label="'区域'">
              <cs-field-select
                :placeholder="'请选择'"
                v-model="item.PlaceName"
                :options="areaOption"
                @input="change"
              />
            </cs-form-item>
          </el-col>
    
    import Parameter from '@/utils/parameters'
    
    areaOption: [],
    
     this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
            this.supplierOption = res
          })
    
    <script>
    import Parameter from '@/utils/parameters'
    
    export default {
      name: 'Insured_from',
      props: ['formData'],
      data() {
        return {
          item: {},
          tenantId: this.$store.getters.tenant.TenantId,
          CertTypeOptions: [],
          Measurement: Parameter.Assets.Measurement.Items,
          areaOption: [],
          supplierOption: []
        }
      },
      created() {
        this.getAxios('/Areas/{0}/FetchAreaOption'.format(this.tenantId)).then(res => {
          this.areaOption = res
        }),
          this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
            this.supplierOption = res
          })
      },
      methods: {
        /* 改变值 */
        change() {
          this.$forceUpdate()
        }
      },
      /* formData绑定item */
      watch: {
        formData: {
          handler(val) {
            this.item = val
          },
          immediate: true,
          deep: true
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .title-part {
      margin: 0 5% 20px;
      padding-bottom: 5px;
      border-bottom: solid 1px #dadada;
    }
    </style>
    
    
     [HttpGet("FetchSupplierOption")]
            public List<SupplierOption> FetchSupplierOption()
            {
                var token = this.GetSecToken();
                using (var db = Db.GetTenantDb(token.TenantId))
                {
                    var result = Supplier.GetList(db, token.TenantId);
                    var resultArray = new List<SupplierOption>();
                    foreach (var item in result)
                    {
                        resultArray.Add(new SupplierOption() { Value = item.Id, Label = item.Name });
                    }
                    return resultArray;
                }
            }
    
    展开全文
  • {{ type.label }} changeType:function ... @click="getDivision()"换成@click.native="getDivision()"就可以了 给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)

             <Card>
              <Select v-model="typeSelect" style="width:150px;float: right;z-index:999;position: relative" placeholder="请选择指标" @click="changeType()">
                <Option v-for="type in typeArray" :value="type.value" :key="type.label">{{ type.label }}</Option>
              </Select>
              <chart-card :stats-data="playTypePie"></chart-card>
            </Card>
        changeType:function (){
          console.log('您选择了', this.typeSelect)
        },
    在点击选择数据类型的时候发现无法触发changeType().

    @click="getDivision()"换成@click.native="getDivision()"就可以了
     

    给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)

    展开全文
  • vue下拉框选择触发事件无效的问题

    千次阅读 2020-07-09 17:46:47
    vue下拉框中如果想在点击下拉框的时候触发事件,使用@click方法不会触发事件。给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)。另外@change事件值发生改变...

    vue下拉框选择触发事件无效的问题

    vue下拉框选择触发事件无效

    在vue下拉框中如果想在点击下拉框的时候触发事件,使用@click方法不会触发事件。给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)。另外@change事件值发生改变的时候触发。

    代码如下:

     <el-select v-model="scope.row.sfff" filterable placeholder="请选择" @click.native="selectData(scope.row.miiId)" @change="changeData(scope.row.sfff,scope.$index,scope.row.weight)" >
    <el-option v-for="(item,index) in listData" :key="index" :label="item.scoreCondition" :value="item.score"> </el-option>  </el-select>
    
    展开全文
  • 下拉框的change事件

    千次阅读 2020-12-20 17:50:00
    $(document).ready(function() {//绑定下拉框change事件,当下来框改变时调用 SelectChange()方法$("#selectID").change(function() { SelectChange(); });})function SelectChange() {//获取下拉框选中项的text属性...
  • 下拉框使用@click没有作用,要使用@click.native &lt;input ref="upload-input" accept="*/*" type="file" style="display:none" @change="handleClick"&...
  • v-close放在点击不关闭下拉框的标签上 "search-bar-package search_bar-package" v-close> "div_form"> "opt"> 专业 "../assets/images/sanjiao.png" alt @click="showopt" /> "div_form_search" type="search" ...
  • 在开发过程中使用Element UI中Select下拉框时可能会遇到绑定对象的情况,总结如下: <el-select v-model="productionClassId" value-key="id" @change="deptChangeVal" style="width:200px" placeholder="请...
  • VUE 自定义下拉框时,点击其它区域触发事件(关闭、修改等) this.$el是在mounted中才会出现的,在created的时候是没有的所以我们引用的时候,它指的是当前组件的的元素。$el读取的是组件实例挂载的dom元素。($el...
  • VUE下拉框双向联动

    千次阅读 2022-04-01 19:59:30
    VUE实现多个下拉框双向联动效果
  • ElementUI组件下拉框绑定点击事件无效的解决方案 在使用脚手架构建的项目中需要使用到下拉组件 <el-dropdown> <span class="el-dropdown-link" ref="echarType"> 柱状图<i class="el-icon-arrow-...
  • Vue下拉框动态加载数据 <template> <a-select v-model="model.type" show-search placeholder="请选择下拉框数据" style="width: 100%"> <a-select-option v-for="item in info" v-bind:key="item...
  • 首次加载时默认值都为空而且被影藏,选择了需要修改字段时,在监听中才被赋值,二下拉框绑定字段时绑定的lable 问题的解决: 如果使用在watch中赋值给每个字段的这种方法,可以在获取的下拉列表中使用push方法,...
  • VUE 动态绑定下拉框

    万次阅读 2018-05-02 10:27:56
    vue 实例: 这边的selected:0 是初始值,就是下面一张图dom中v-model 绑定的selected序号。它随着选择的序号不同而不同。 这样就实现了下拉框和span元素中内容的联动,这种办法最简便。 绑定并实现联动: .....
  • 基于vue下拉框n级联动

    千次阅读 2022-04-26 13:51:28
    基于vue实现下拉框的n级联动
  • vue select下拉框绑定值不跟着变问题

    千次阅读 2020-12-22 09:18:30
    select框 绑定的都是同一个下拉数据源, v-model 绑定的 value1在data中有定义声明,但是list的length 是不确定的,所以每个select的v-model不可能在data中声明…. 想请教下,这种情况下怎么去绑定循环生成的select...
  • vue下拉框多选

    千次阅读 2022-04-20 18:18:56
    v-model绑定的value2就是你下拉框要多选的参数,例:1,2 <el-select v-model="value2" allow-create filterable multiple collapse-tags default-first-option placeholder="请选择文章标签"> <el-...
  • 出现这样的情况是因为后端返回的Id的格式类型和前端需要的不一致导致的, 把后端的id格式由Integer改成String后就可以了:
  • vue select下拉框绑定默认值

    千次阅读 2017-12-11 10:14:00
    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一、当没有绑定v-model,直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候,要给v-model绑定...
  • 1、 2、 typeChange(){ const selectedList = this.jpProject.jpZhs.filter(item => item.gclx).map(item => item.gclx); this.zhOptions.forEach(item => {item.disabled = false;...selectedList.forEach...
  • vue 下拉框多选校验问题

    千次阅读 2020-12-21 22:28:17
    最近发现下拉框多选(multiple)时,一开始进页面就会触发验证,显然是不友好的。 解决方案: 在校验规则里加type:"array"; 下拉多选框绑定的变量初始值设置为[] html多选框如下: <el-form-...
  • 向下列表格绑定数据 <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-...
  • 完成vue.js下拉框选择绑定与取值,实现效果图如下: template代码 <template> <div> <Form :model="formItem" ref="formItem" :rules="ruleInline" :label-width="80".....
  • 主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 效果如下 父文件 <template> <div class="parent-selete_header-color"> <...import selete from '@/pages/demo/selete.vue'; export default { components: { selete } }; </s

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,249
精华内容 1,699
关键字:

vue下拉框绑定点击事件