vue中select設置默認選中

一、總結

一句話總結：

通過v-model來：select上v-model的值為option默認選中的那項的值（value）

 

 

二、select設置默認選中實例

博客對應視頻位置：1、vue中select設置默認選中
https://fanrenyi.com/video/7/22

 

<div class="form-group">
    <label class="col-sm-2 control-label">所屬課程</label>
    <div class="col-sm-10">
        <div style="line-height: 34px;">
            <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>
        </div>

    </div>
</div>
<div class="form-group">
    <label for="v_c_id" class="col-sm-2 control-label">所屬章節</label>

    <div class="col-sm-10">
        <select v-model="chapter_select" name="v_c_id" id="v_c_id" class="form-control" required>
            <option v-for="chapter in chapters" :value="chapter.c_id">@{{chapter.c_name}}</option>
        </select>
    </div>
</div>

<script>
    //console.log(window.chapter_url);
    new Vue({
        el:"#edit_video",
        data:{
            lessons:window.lessons,
            chapters:window.chapters,
            lesson_id:window.lesson_id,
            chapter_select:window.video_chapter_select,
        },
        methods:{
            get_chapters:function (lesson_id) {
                this.lesson_id=lesson_id;
                let url=window.get_chapters_url+'/'+lesson_id;
                this.$http.post(url, {_token: "{{csrf_token()}}"}).then(function (result) {
                    layer_alert_success('獲取數據成功！');
                    // 通過 result.body 拿到服務器返回的成功的數據
                    this.chapters=result.body.chapters;
                    //console.log(result.body)
                    //console.log(result.body.data.data)
                },response => {
                    // error callback
                    layer_alert_fail('獲取數據失敗！');

                })
            }
        }
    });
</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，感興趣的話可以看一下，試一下。