vue獲取element-ui的下拉框的值
阿新 • • 發佈:2018-11-22
vue+element 獲取下拉框的值,程式碼:
<template> <div> <el-row> <el-col :span="5"><div class="grid-content bg-purple"> <el-select :default-active="$route.path" @change="chickvalue" v-model="searchValue" filterable placeholder="請輸入/請選擇" class="h-m-select"> <el-option v-for="item in options" :key="item.value" :label="item.label" v-model="item.value"> </el-option> </el-select> </div></el-col> <el-col :span="24"> <!--操作按鈕--> </el-col> <el-col :span="24"> <!--列表--> </el-col> <el-col :span="24"> <!--列表底部內容--> </el-col> </el-row> <el-row> <router-view> </router-view> </el-row> </div> </template> <script> export default { name: 'homeMenu', data () { return { options: [{ value: '選項0', label: '保密設定' }, { value: '選項1', label: '黃金糕' }, { value: '選項2', label: '雙皮奶' }, { value: '選項3', label: '蚵仔煎' }, { value: '選項4', label: '龍鬚麵' }, { value: '選項5', label: '北京烤鴨' }, { value: '/home', label: '首頁' }], searchValue: '' } }, methods: { handleClick () { alert('button click') }, chickvalue () { console.log(this.searchValue) } } } </script> <style scoped> .h-m-select{ margin-top: 10px ; } </style>
關鍵程式碼:
el-select標籤的@change方法和v-model資料繫結
el-option的v-model的資料繫結