vue select控件赋值问题

图片说明

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

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 视图应是完全分离的

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

 this.ruleForm.sex='后台type记录的值'
Dream_ling
Dream_ling 回复StackTc: 我也遇到了同样的问题
22 天之前 回复
Dream_ling
Dream_ling 回复StackTc: 这个怎么解决的呢
22 天之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复StackTc: 那就是你el-select写得有问题了,原生select直接设置model值就行了
2 年多之前 回复
StackTc
StackTc 这样不行的哦,我这样写的话 他会显示2 而不是 女
2 年多之前 回复

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

简易的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>

<!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>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问