vue中select的使用以及select设置默认选中20190222

1.问题:

写角色页面,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白

2.解决思路:

html代码如下,通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name.

3.大神的Demo参考:


首先说明,html这样写没有任何问题,动态的select的正确使用方法就是这样。

下面是js代码:

        var vm = new Vue({
                el: '#app',
                data:{
                    couponList:[
                        {
                            id: 'A',
                            name: '优惠券1'
                        },
                        {
                            id: '1',
                            name: '优惠券2'
                        },
                        {
                            id: '2',
                            name: '优惠券3'
                        }
                    ],
                    couponSelected: '',
                },
                created(){
            //如果没有这句代码,select中初始化会是空白的,默认选中就无法实现
                    this.couponSelected = this.couponList[0].id;

                },
                methods:{

            getCouponSelected(){

                        //获取选中的优惠券

                        console.log(this.couponSelected)

                    }

                }
            })

上面的js代码是正确的,我下面说明一下隐藏属性是什么

隐藏属性就是

当我们把v-model中的couponSelected,也就是data里的couponSelected的值赋值为循环的option中的value后,那这个option就会被默认选中

4.小结

官方参考文档:https://cn.vuejs.org/v2/guide/forms.html

以上demo参考链接:https://www.cnblogs.com/till-the-end/p/8473738.html 

5.实际尝试操作:

vue中select的使用以及select设置默认选中20190222_第1张图片

遇到的问题,第一次赋值可以,然后打开第二行信息的收应该是空,实际是admin,

怀疑是赋值问题,打开时默认赋值时是空的,然后再查询一次后赋值,或者是直接当前角色信息,空为空,值为值。

 






 

你可能感兴趣的:(vue的select隐藏属性)