vue中select设置默认选中

时间：2024-02-19 15:07:08

vue中select设置默认选中

一、总结

一句话总结：

通过v-model来：select上v-model的值为option默认选中的那项的值（value）

 

 

二、select设置默认选中实例

博客对应视频位置：1、vue中select设置默认选中
https://fanrenyi.com/video/7/22

 

 1 <div class="form-group">
 2     <label class="col-sm-2 control-label">所属课程</label>
 3     <div class="col-sm-10">
 4         <div style="line-height: 34px;">
 5             <button type="button" v-for="lesson in lessons" :class="[lesson_id==lesson.l_id ? \'btn btn-success btn-xs\' : \'btn btn-info btn-xs\']" style="margin-right: 5px;margin-bottom: 5px;" @click="get_chapters(lesson.l_id)">@{{ lesson.l_title }}</button>
 6         </div>
 7 
 8     </div>
 9 </div>
10 <div class="form-group">
11     <label for="v_c_id" class="col-sm-2 control-label">所属章节</label>
12 
13     <div class="col-sm-10">
14         <select v-model="chapter_select" name="v_c_id" id="v_c_id" class="form-control" required>
15             <option v-for="chapter in chapters" :value="chapter.c_id">@{{chapter.c_name}}</option>
16         </select>
17     </div>
18 </div>
19 
20 <script>
21     //console.log(window.chapter_url);
22     new Vue({
23         el:"#edit_video",
24         data:{
25             lessons:window.lessons,
26             chapters:window.chapters,
27             lesson_id:window.lesson_id,
28             chapter_select:window.video_chapter_select,
29         },
30         methods:{
31             get_chapters:function (lesson_id) {
32                 this.lesson_id=lesson_id;
33                 let url=window.get_chapters_url+\'/\'+lesson_id;
34                 this.$http.post(url, {_token: "{{csrf_token()}}"}).then(function (result) {
35                     layer_alert_success(\'获取数据成功！\');
36                     // 通过 result.body 拿到服务器返回的成功的数据
37                     this.chapters=result.body.chapters;
38                     //console.log(result.body)
39                     //console.log(result.body.data.data)
40                 },response => {
41                     // error callback
42                     layer_alert_fail(\'获取数据失败！\');
43 
44                 })
45             }
46         }
47     });
48 </script>

第14行：给select元素绑定的v-model的值是 默认option的value

第28行：这里是设置 chapter_select 的默认值

通过v-model来：select上v-model的值为option默认选中的那项的值（value）

 

 

三、参考资料：vue中select的使用以及select设置默认选中

转自或参考：vue中select的使用以及select设置默认选中
https://www.cnblogs.com/till-the-end/p/8473738.html

简介

今天写pc端引入vue，遇到了一个问题，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，要选择后才有显示，结果查了好多文档，讲的都不是很清楚，后来看到一句提示，试了一下发现居然还有这种隐藏属性。所以，我决定自己写下来，讲清楚。

 

解决过程

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

 

<select name="public-choice" v-model="couponSelected" @change="getCouponSelected">                                        
    <option :value="coupon.id" v-for="coupon in couponList" >{{coupon.name}}</option>                                    
</select>

 

首先说明，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就会被默认选中

小结

这篇文章其实主要是说select默认选中的问题，select使用以及数据获取只是顺带说明，vue关于表单元素的使用，如单选，复选可以参考官方文档，现在的官方文档其实已经写得很不错了，放链接https://cn.vuejs.org/v2/guide/forms.html，感兴趣的话可以看一下，试一下。

 

相关文章