vue select控件赋值问题

图片说明

如图 。性别有3个类型 后台存的是 0 1 2 点击修改按钮的时候,如何让select根据
后台的type选中对应的select 下的option?

0

5个回答

你这段html 代码有问题,你把所有的数据都写死了, 没有了动态设置的功能。你应当按照element ui 的官方文档来写, 在html代码块中使用循环,
动态设置属性

v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">

    然后把可以配置的数据写到 vue 的data中, sex 是绑字的数据, options 则是下拉列表选项
    data: {
      ruleForm: {
          sex: ''
      },
      options: [
          {
            value: '0',
            label: '男' 
          },
          {
            value: '1',
            label: '女' 
          }
      ]
  },

        当后台返回数据时,this.ruleForm.sex = ‘后台返回的数据’ 就可以了。

        vue 是数据驱动的, 也是一个mvvm 框架,model 数据和 view 视图应是完全分离的
0

设置sex为对应的值就会自动选了

 this.ruleForm.sex='后台type记录的值'
3
showbo
支付宝加好友偷能量挖 回复StackTc: 那就是你el-select写得有问题了,原生select直接设置model值就行了
大约一年之前 回复
StackTc
StackTc 这样不行的哦,我这样写的话 他会显示2 而不是 女
大约一年之前 回复

你加个判断不就行了吗,判断后台传来的是哪个,然后就让哪个处于被选中的状态啊

1

简易的html demo
<!DOCTYPE html>







点击

v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">






<br> new Vue({<br> el: &#39;#app&#39;,<br> data: {<br> ruleForm: {<br> sex: &#39;&#39;<br> },<br> options: [<br> {<br> value: &#39;0&#39;,<br> label: &#39;男&#39; <br> },<br> {<br> value: &#39;1&#39;,<br> label: &#39;女&#39; <br> }<br> ]<br> },<br> methods: {<br> click() {<br> this.ruleForm.sex = &#39;1&#39;<br> }<br> }<br> })<br>
0

<!DOCTYPE html>







点击

v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">






<br> new Vue({<br> el: &#39;#app&#39;,<br> data: {<br> ruleForm: {<br> sex: &#39;&#39;<br> },<br> options: [<br> {<br> value: &#39;0&#39;,<br> label: &#39;男&#39; <br> },<br> {<br> value: &#39;1&#39;,<br> label: &#39;女&#39; <br> }<br> ]<br> },<br> methods: {<br> click() {<br> this.ruleForm.sex = &#39;1&#39;<br> }<br> }<br> })<br>

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue下拉选组件i-select无法选取全部,无法赋值为空串''的诡异bug
       这是一个让人头皮发麻,全身慎得慌的诡异bug,因为它不符合科学逻辑,违反常理。仿佛有一只黑手在恶意操控着,让前端工程师们觉得不可以思议,也无可奈何。        我们在做前端开发时, 对于下拉选一般都会有一个“全部”选项,value='',用于清空前面选择的值,这是在正常不过了,但这在vue就开始变得奇奇怪怪,逻辑狗屁不通。       下面我开始对这个诡异的bug进行解刨,分...
vue对select下拉框赋初值后,不能进行选择的问题
Vue使用elementUI的select选择器出现的问题:      初始化赋值后,无法更改label值,数据已经改变,但UI样式为未变 原因:由于对此对象做了一些处理(将对象的键全部转换成小写),改变了对象的键和值,但是由于Vue检测不到对象的变化,导致这个问题 解决方案:使用Vm.$set方法,详情见api官方文档  具体代码如下: HTML部分 &amp;lt;el-form-item...
vue下使用select2,绑定数据问题
在select元素上应用v-model绑定数据,本来没啥问题,后来应用了select2优化样式,发现v-model不管用了。 html部分: &amp;lt;select id=&quot;deviceTypeAdd&quot; name=&quot;deviceTypeAdd&quot; v-model=&quot;deviceTypeAdd&quot; type=&quot;text&quot; class=&quot;span3&quot;&amp;gt; &amp;lt;optio
vue中动态select的使用
html代码如下:   通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;violationsList&quot;&amp;gt; &amp;lt;div class=&quot;type-select&quot;&amp;gt; &amp;lt;select name=&quot;selected&quot; id=
vue+element-ui select多选框赋值之后触发change事件和remove-tag事件
由于业务需求,需要在页面上使用element-ui的select多选框的方法,当select为空时,change事件和remove-tag事件可以完美呈现,但是当select中赋值后,change事件和remove-tag事件可以触发,但是页面上没有反应。 &amp;lt;el-select v-model=&quot;debt.borrowers&quot; filterable multiple placeholde...
vue.js select下拉框绑定和取值
最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 {{send.CODE}} 2.取值就直接获取下拉框,v-model绑定的属
select基本的取值,赋值及清空
1.获取select被选中的option的值 js实现 var selected = document.getElementById('selectedId'); //定位id var index = selected.selectedIndex; // 选中索引 var text = selected.options[index].text; // 选中文本 var value = s
设置Select下拉多选框功能,赋值与绑定问题
项目需要所以更改select为多选下拉的菜单选项. 我用的是后台直接绑定 在前台aspx页面直接写一个 在后台页面直接写一个绑定的方法,如果为编辑的状态时候,就传参数flage为true,否则默认设置flase就行了. protected void Binddropcq(bool flage) { string sql = "SELECT sel
MDUI中Select初始化问题
在使用MDUI的时候,使用级联时,碰到了数据不能正常显示的问题,去GIT HUB中提问了作者后发现,原来还是自己没有好好的看说明文档,那么为什么要写这个呢?因为发现了作者没有标明的一点,就是初始化的问题,主要还是提醒自己吧! HTML &amp;lt;select ref=&quot;el&quot; value.bind=&quot;val&quot; class=&quot;mdui-select&quot; mdui-select&amp;gt; JS ...
select动态绑定vue.js
动态选项,用 v-for 渲染: {{ option.text }} Selected: {{ selected }} new Vue({ el: '#demo', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two',
select 选择框设置值的问题
&amp;lt;select name=&quot;type&quot; param='&amp;lt;@s.property value=&quot;tmsBox.type&quot;/&amp;gt;' &amp;gt; &amp;lt;option value=&quot;0&quot; &amp;gt;周转箱&amp;lt;/option&amp;gt;
vue.js 利用v-model让select默认选中不生效的问题
笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下。 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题。js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义...
vue v-for循环出多个select,select取值(select有默认选项)
&lt;ul&gt; &lt;li v-for="item in list" &gt; {{item.name}} &lt;select @change="changea($event)"&gt; &lt;option value="" disabled selected&gt;必选&lt;/option&gt; ...
使用iview多选框选择多个时候影响页面样式
长度较短时不影响样式. 选择多个时候选择框里面内容太多,宽度就变高了,哪位大神知道怎么解决,后面展示个数或者隐藏之类的
C# 含runat="server"属性 select控件的value和text赋值(实际值和显示文本)
.cs代码 string strs = "select id,title from table "; DataTable dts = Tools.GetDataSet(strs); if (dts.Rows.Count > 0) { ktname1.Items.Clear();
VUE修改select option绑定的数组对象却无法及时刷新页面数据问题
对于一个刚毕业的后端开发者,开始总以为后端开发只做后端,谁知第一个月工作内容大部分都是前端,天真,只能说天真。 才入前端,坑真的很多,简单的样式倒是很好解决,遇到稍微棘手点问题还是挺浪费时间的,这两天就遇到一个VUE修改select option绑定的数组对象却无法及时刷新页面数据问题,整整浪费了一早上的时间,这里简单做下记录。 html页面代码如下: &amp;lt;el-select v-mod...
weex-如何自定义一个控件,并向控件中传值,接上一篇vue.set和this.xxx赋值
上一篇博客,博主对vue.set和this.xxx赋值属性做了说明,但究竟要怎么来定义属性和进行赋值呢?同时这里也牵涉到如何来自定义一个控件,类似于weex-ui中的那些写好的组件组件,可以直接调用的。 效果图如下: 这里要特别说明下,在网页上不知道什么原因传值失败,效果图如下: 传值有问题,但使用playground App扫码在真机或者模拟器运行都是正确的,我们以真机运行和模拟器...
vue select当前value没有更新到vue对象属性
vue是一款轻量级的mvvm框架,追随了面向对象思想,使得实际操作变得方便,但是如果使用不当,将会面临着到处踩坑的危险,写这篇文章的目的是我遇到的这个问题在网上查了半天也没有发现解决方案,最终研究了vue的源码中有关select元素的部分找到了答案,下面简单介绍我踩的关于select的一个坑:         使用场景:有两个select元素,一个select元素变动时,动态修改另一个selec
Vue框架整理:表单控件:input 、select设置
表单控件一般多用于页面交互或数据录入,可以说是很常用的东西了,Vue提供了v-model 指令,用于表单元素的双向绑定数据 需要注意的是,使用v-model后,表单控件只会关注绑定的数据,对于input的value值 或 textarea 中间的值都不会再生效 &amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;v1&amp;amp;amp;quot;&amp;amp
动态给select赋值
当点击页面中的一些元素,会改变select的值,这样的情况比较多见。代码如下:<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <style type="text/css"> sele
Vue下拉框回显问题,回显默认选中随机问题
今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了,但是这个问题还是存在的,后来发现问题是回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些,因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果总结:1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷...
vue+layui+select遇到的1个奇葩bug,坑了我好几天
    &amp;lt;div class=&quot;layui-form-item&quot;&amp;gt;                        &amp;lt;label class=&quot;layui-form-label&quot;&amp;gt;业务&amp;lt;/label&amp;gt;                           &amp;lt;div  class=&quot;layui-input-inline&quot;&amp;gt;         
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理在公司项目中,我们使用了 element-ui 组件库,非常的好用。近日我们的项目升级,而 element-ui 组件库也升级了。而升级的内容中有我们希望使用的新特性,于是我们愉快的升级了。但是在升级之后,我们发现在某一块功能中使用的 Select 组件出现了问题。具体表现为选不上值,随便
使用Vue框架Select元素在ie11加载页面时显示异常
&amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;select id=&quot;sl&quot; v-model=&quot;selected&quot;&amp;gt; &amp;lt;option disabled value=&quot;&quot;&amp;gt;请选择&amp;lt;/option&amp;gt; &amp;lt;option value=&quot;1&quot;&amp;gt;A&amp;l
Asp.net后台绑定select服务器控件
前台代码:Text1Text2后台代码:for (int i = 0; i             {                if (selName.Items[i].Value.Trim() == strValue) /*strValue为select控件value的值*/                {                   
layui中使用vue,如果用layui的初始赋值绑定失效问题
如果在layui的相关节点中加了vue判断条件,那么layui给表单初始赋值的操作会失效。 下面红框里面的是错误的,如果去掉v-if=&quot;user!=null&quot;那么即可用layui的初始赋值。 配合下面绿框看 ...
select控件赋值的问题
我有一个select控件有rn rn text1rn text2rn text3rn text4rn text5rn text6rn rn比如我在文本写入1或则写入text1rnselect控件就选text1的值rn我的方法是把文本的内容和select的内容对比..难后让select选中这个选项..rn有没有比较好的方法?rn在这谢谢啦
vuejs绑定数据到select中,选择option数据后,同步改变下面一个输入框input的值
前言:应公司开发,某小功能的需要,所以初次接触到vuejs,摸索学习中,还不熟练,只是简单分享一些公司开发中遇到的一些问题,有不足的地方欢迎留言讨论。   一,问题描述: 【当前页面里有一个select框 + 一个input框】 1.ajax请求后台数据,绑定到select下拉单选框中。 2.点击下拉框,选中一栏数据,同时input从没有值变成同步更新到选中的那一栏值。 3.演示效果图
vue中select问题
{{ option.text }} Selected: {{ selected }} data : { selected: 'C', // 比如想要默认选中为 Three 那么就把他设置为C options: [ { text: 'One', value: 'A' }, //每个选项
vue.js下使用element表单,设置select的选项为对象传给后台
  给大家分享下当时设置select选项为对象的坑 ` &amp;lt;el-form-item label=&quot;label标签名字:&quot;&amp;gt; &amp;lt;el-select v-model=&quot;formData.jsonStr&quot; value-key=&quot;desc(此值必须设置,不设置会有bug,此值是原数据类型中的唯一键)&quot; placeholder=&quot;请选择&quot;&amp;gt; &amp;lt;el-
经验篇之vue中传值以及赋值问题
作为Vue非资深的学习者,在工作中使用vue的时候还是遇见的很多所谓的坑,打算总结一下;就在昨天PM找到我,给我看了一个bug,很是头疼的是,我看了半天代码就是看不出有什么问题,但是实现起来就是报错。先看一下场景: 这是详情页的tab栏,这里的大概逻辑就是从别的页面跳转到详情页并且需要选中虚拟服务器组这个tab栏,代码的逻辑是先获取详情页信息Detail,然后把detail这个对象以prop...
selectpicker异步初识渲染
Html:js:
Vue.js:Select--Option >下拉框绑定和取值
遇到了这个解决了,所以记录一下: 1.Vue.js 2.https://www.iviewui.com/components/select   完成vue.js下拉框选择绑定与取值,实现效果图如下:     template代码   &amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;Form :model=&quot;formItem&quot; r...
vue使用axios不能赋值问题
举例在钩子函数mounted中 mounted(){ //由于this在回调函数中指向不同并非是vue实例所以先赋值给_this var _this=this this.axios.post('https://www.easy-mock.com/mock/5c2dc796c8bc2e49abfeaa30/nurse/nurse_infor') ...
Vue.js获取被选择的option的value和text值
1.获取option的value的值,watch option 控件时,或自动获取option的value的值。2.获取被选中的option的text的值时,使用:$(&quot;#optionID option:selected&quot;).text
js 实现对Select动态赋值 C#从后台获取
js 代码
vue Treeselect 下拉树选择框出现unknown问题
如何安装自行百度 引用  之前遇到的情况是一直显示unknown,查阅资料之后,才知道,当下拉树是单选的时候,绑定的值设为null,必须是null,不能是‘null’,初始化的时候才不会出现unknown 还有就是在normalizer中要处理下空节点   options的值是个树形结构的数组,normalizer属性,是用于转换options的值的,把options的值...
冲击多个Input File赋值兼解决中文赋值问题!
解决无法为FIle控件赋值的问题!并且支持中文赋值问题。
vue填坑系列之重置select选择器默认值
具体的需求如下,在点击重置按钮的时候,我需要将select下拉框重置为初始值,输入框重置为空 打印输出值的时候会发现如果默认没有任何选中的状态下,直接将当前元素重置为空字符串就可以了 如下: this.form.deviceNoVal = '' this.form.deviceType = '' 如果重新赋值的话相当于...
file控件无法赋值解决实例
解决无法为FIle控件赋值的问题!并且支持中文赋值问题
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 区块链问题 大数据专业教育的问题