StackTc
2018-04-26 19:15
采纳率: 61.9%
浏览 10.6k
已采纳

vue select控件赋值问题

图片说明

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

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • qq_26406403 2018-04-29 04:34
    已采纳

    你这段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 视图应是完全分离的
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 一起喝茶去呗 2018-04-26 23:14

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

    评论
    解决 无用
    打赏 举报
  • 设置sex为对应的值就会自动选了

     this.ruleForm.sex='后台type记录的值'
    
    评论
    解决 无用
    打赏 举报
  • qq_26406403 2018-04-29 04:36

    简易的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>
    评论
    解决 无用
    打赏 举报
  • qq_26406403 2018-04-29 04:37

    <!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>
    
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题