vue中select的使用以及select設定預設選中

Bound_w發表於2018-12-23
Vue

簡介

今天寫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，感興趣的話可以看一下，試一下。

 

原文出處：https://www.cnblogs.com/till-the-end/p/8473738.html

相關文章